学习交流：https://gitee.com/potato512/Learn_ReactNative
react-native学习交流QQ群：806870562
react-native使用react-navigation（https://reactnavigation.org/）进行导航功能开发。
效果图
使用
安装react-navigation这个包，在终端使用如下命令（需要在项目项目中执行）：
方法1：yarn add react-navigation
方法2：npm install --save react-navigation
使用
1、配置
（1）在App.js文件中的配置
导入头文件：import { createStackNavigator } from 'react-navigation';
const RootStack = createStackNavigator(
{
// 定义路由页面
Home: NavigationPage,
homeNext: NavigationPageNext,
Details: NavigationPageDetail,
},
{
// 初始化首页
initialRouteName: 'Home',
}
);
使用路由：
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
2、自定义样式
headerTitle：设置导航栏标题，推荐
header：可以设置一些导航的属性，隐藏顶部导航栏设置为null
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
如：
export default class NavigationPage extends React.Component {
// 配置导航栏
static navigationOptions = {
// 导航栏标题，不推荐
title: 'Home',
// 设置导航栏颜色
headerTintColor: "green",
// 导航条的样式，如背景色，宽高等
headerStyle:{
backgroundColor:"#1E90FF",
// 导航栏文字样式
headerTitleStyle:{
paddingLeft:20,
fontSize:30
},
};
}
或：
export default class NavigationPageNext extends React.Component {
constructor(props){
super(props);
_this = this;
}
// 配置导航栏
static navigationOptions = {
// 导航栏标题，推荐使用
headerTitle: (
<Button title="homeNext"
color="black"
onPress={() => alert("点击民航栏标题")}>
</Button>
),
// 导航栏返回按钮标题
headerBackTitle:"返回",
// 导航条左侧，可以是按钮或者其他视图控件
headerLeft: (
<TouchableOpacity onPress={() =>{
_this.props.navigation.goBack();
}}>
<Image style={{marginLeft:20,width:30,height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image>
</TouchableOpacity>
),
// 导航条右侧。可以是按钮或者其他视图控件
headerRight: (
<Button title="Info"
color="red"
onPress={() => {
_this.props.navigation.navigate('Details')
}}/>
),
};
}
（1）不带参数，且过滤历史
// navigae过滤现有导航，即如果已导航到视图B，再导航时不会导航
this.props.navigation.navigate('homeNext')
（2）带参数，且过滤历史
// navigae不过滤现有导航，即如果已导航到视图B，再导航时继续导航
this.props.navigation.navigate('homeNext',{message:"导航过来了"})
（3）不带参数，且不过滤历史
// push过滤现有导航，即如果已导航到视图B，再导航时不会导航
this.props.navigation.push('homeNext')
（4）带参数，且不过滤历史
// push不过滤现有导航，即如果已导航到视图B，再导航时继续导航
this.props.navigation.push('homeNext',{message:"导航过来了"})
（5）返回
this.props.navigation.goBack()
或：
this.props.navigation.pop()
或（根页面）：
this.props.navigation.popToTop()
4、传值
this.props.navigation.navigate('homeNext',{message:"导航过来了"})
或：
this.props.navigation.push('homeNext',{message:"导航过来了"})
<Text>导航栏使用: {this.props.navigation.state.params.message}</Text>
