概括
从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的值 -
headerBackTitleIOS返回按钮标题，默认为title的值 -
headerRight头部右边的布局headerLeft同理 -
headerStyle设置导航栏的背景色，宽高等 -
headerTintColor设置头部标题颜色 -
headerPressColorAndroidAndroid5.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
