概括

从RN 0.43开始，使用Navigator会发现会报如下的错

图1.png

提示过时，所以我们得使用最新的react-navigation。使用react-navigation首先得npm安装依赖包，执行下面命令

npm install --save react-navigation

执行完后，下面就可以使用react-navigation了。

StackNavigator的简单使用

index.android.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry } from 'react-native';

import FirstScreen from './FirstScreen';
import ScondScreen from './ScondScreen';

const BasicApp = StackNavigator({
      First: {screen: FirstScreen},
      Scond: {screen: ScondScreen},
})
AppRegistry.registerComponent('Project47', () => BasicApp);

FirstScreen.js

import React, { Component } from 'react';
import {
  Button
} from 'react-native';

class FirstScreen extends React.Component {
  static navigationOptions = {
    title: '第一页',
  };
render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="跳转到第二页"
        onPress={() =>
          navigate('Scond', { name: '第二页' })
        }
      />
    );
  }  

}

module.exports = FirstScreen

ScondScreen.js

import React, { Component } from 'react';
import {
  Button
} from 'react-native';

class ScondScreen extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });
  render() {
    const { goBack } = this.props.navigation;
    return (
      <Button
        title="返回"
        onPress={() => goBack()}
      />
    );
  }
}

module.exports = ScondScreen

首先会在index.android.js里面引入react -navigation，然后将需要跳转的Screen以闭包的形式传入得到BasicApp，然后跳转主要使用的是navigate()方法

const { navigate } = this.props.navigation;

navigate('Scond', { name: '第二页' })

相当于this.props.navigation.navigate('Scond', { name: '第二页' })

返回类似，对应的是goBack()方法。

const { goBack } = this.props.navigation;

onPress={() => goBack()}

相当于this.props.navigation.goBack()

另外，Navigation Options还有更多的属性可设置，例如

• header 默认为null，可自定义头部
• headerTitle 设置头部标题，默认为title的值
• headerBackTitle IOS返回按钮标题，默认为title的值
• headerRight 头部右边的布局 headerLeft同理
• headerStyle 设置导航栏的背景色，宽高等
• headerTintColor 设置头部标题颜色
• headerPressColorAndroid Android5.0以上设置颜色纹理
• headerBackTitleStyle 设置导航栏‘返回’文字样式
• initialRouteName: Home, 默认显示界面
• headerTitleStyle，头部标题的样式，比如设置头部标题居中

headerTitleStyle:{
            width: '75%',
            textAlign:'center',
            alignSelf:'center',
        },

等等

TabNavigator 的使用

其相当于Android的TabLayout，只需要把上文的StackNavigator修改为TabNavigator，然后把两个Tab的标题改下，如下

index.android.js

import { TabNavigator } from 'react-navigation';
const BasicApp = TabNavigator({
     ...
  })

FirstScreen.js

 static navigationOptions = {
    title: '首页',
  };
 onPress={() =>
          navigate('Scond')
 }

ScondScreen.js

static navigationOptions = ({navigation}) => ({
    title: '我的',
  });

然后就可以看到如下效果

图2.png

DrawerNavigator的使用

抽屉式效果

将上文的TabNavigator为DrawerNavigator,
FirstScreen.js

static navigationOptions = {
    drawerLabel: '首页',
  };

ScondScreen.js

static navigationOptions = ({navigation}) => ({
    drawerLabel: '我的',
  });

最终就可以看到效果

图3.png

更多资料参考

https://reactnavigation.org/docs/intro/headers