React_Native 再学习2——导航进阶之StackNavigator

在React_Native再学习1中已经对Navigation的StackNavigator进行了基本的学习。

对于React Navigation它里面包括以下控件：

StackNavigator ：用于app界面窗口之间的切换

TabNavigator ：用于设置一个界面的不同tabs

DrawerNavigator ：用于抽屉界面

他们每一个都是项目中频繁使用的，我们要对他们一一进行学习

跳转到另外一个page

在日常使用StackNavigator的时候我们对于每一个screen自成一个.js文件，从而实现比较不错的封装。这里我们就需要跳到不同的.js文件中的Screen了。

注意：

1、不同于java的.java文件名需要和内部的类名相同，这里每一个.js文件相当于一个容器。

2、虽然每一个.js文件里面可以有很多class，但是它的exportdefault XXX; 只能导出一个class类。在主页面我们需要指定要跳转的页面

这个class类必须设置export default XXX;这个属性，不然即使import了还是会找不到

注意点应该就这两个，具体的我们看代码：

代码

App文件：

OriginPageJump：

改变Navigation的title

参考：

https://github.com/react-community/react-navigation/issues/1746

 

改变title我尝试了很多种方法，大多都不行，最后找到一直播那个可行的方法。

这里RN的执行顺序如上图，先执行1在执行2，执行1的时候还没有page2的构造函数，所以在navigationOptions中开始是拿不到this对象的，所以就更别说state和props了。在执行了构造函数时，我们重新设置了navigation的title值，则又重新调用1。

这里我们还可以通过调用button的点击事件去重新设置title。

 

 

Navigation中的navigationOptions和StackNavigatorConfig

参考：http://blog.csdn.net/lu1024188315/article/details/73550028

navigationOptions：

l  title: 导航栏的标题

l  header: 导航栏设置对象

l  headerTitle: 导航栏的标题, 可以是字符串也可以是个组件

l  headerBackTitle: 左上角的返回键文字, 默认是上一个页面的title，设置这个属性会覆盖掉title的值

l  headerRight: 导航栏右按钮,可以是个组件

l  headerLeft: 导航栏左按钮,可以是个组件

l  headerStyle: 导航栏的style

l  headerTitleStyle: 导航栏的title的style

l  headerTintColor: 返回按钮的颜色

l  headerPressColorAndroid ：按压返回按钮显示的颜色 安卓系统 >= 5.0才有效。

l  gesturesEnabled ：是否允许右滑返回，在iOS上默认为true，在Android上默认为false

我们设置navigationOptions有两个位置：

在StackNavigator中设置：

在对应的.js文件内设置：

以在StackNavigator中的设置会覆盖.js文件中的设置。

效果：

这里用到了react-native-vector-icons这个库，这个是在写到这里的时候看别人的demo看到的，具体引入和用法参看我的：

 

1、      设置title

2、       设置headerStyle、headerTitleStyle、headerTintColor

3、       设置headerTItle、headerLeft

所以看它完全支持我们自定义title的需求啊！

StackNavigatorConfig

l  initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件

l  initialRouteParams: 初始路由的参数

l  navigationOptions: 屏幕导航的默认选项

l  paths: RouteConfigs里面路径设置的映射

n  mode: 页面切换模式:

n  card: 普通app常用的左右切换

l  modal: 上下切换

l  headerMode: 导航栏的显示模式:

n  float: 无透明效果, 默认

n  screen: 有渐变透明效果, 如微信QQ的一样

n  none: 隐藏导航栏

l  cardStyle: 样式

l  onTransitionStart: 页面切换开始时的回调函数

l  onTransitionEnd: 页面切换结束时的回调函数

这里我只是尝试了几个属性。

 

Navigation中的navigation

在导航器中的每一个页面，都有navigation属性，该属性有以下几个属性/方法：

l  navigate - 跳转到其他页面

l  state - 当前页面导航器的状态

l  setParams - 更改路由的参数

l  goBack - 返回

l  dispatch - 发送一个action

 

navigate

调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数：
— routeName 导航器中配置的路由名称
— params 传递参数到下一个页面
— action action

eg:

this.props.navigation.navigate('Find',{param: 'i am the param'});

 

Navigation Actions：

参考：

https://reactnavigation.org/docs/navigators/navigation-actions#Navigation-Actions

所有的NavigationActions都可以用navigation.dispatch() 方法进行调用。

这里的action比较常用的是两种：

普通的navigate的action：将新页面入栈并跳转：

reset引导的action；通过reset操作，将墙出所有的nacvigation的状态，并用我们设置的actions进行替换：

index:指定打开的actions中的哪一个

actions: 用来替代Navigation栈，从上到下依次先入栈

key:如果设置的话，navigator就会依据这个key来reset，如果不设置，则在调用时直接reset。

最后，我们回到主页，清楚栈的操作可以这么写：

State

 

setParams

 

goBack

dispatch

 

Navigation中数据传递

我们在navigate的时候进行参数传递：

专递的参数最终可以在navigation.state中拿到。