react-native导航栏react-navigation
学习交流：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
}
}
（2）在其他被注册成路由的页面中配置
2、自定义样式
title：标题，不推荐使用（如果设置了这个导航栏和标签栏的title就会变成一样的）
headerTitle：设置导航栏标题，推荐
header：可以设置一些导航的属性，隐藏顶部导航栏设置为null
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
如：
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: (
color="black"
onPress={() => alert("点击民航栏标题")}>
),
// 导航栏返回按钮标题
headerBackTitle:"返回",
// 导航条左侧，可以是按钮或者其他视图控件
headerLeft: (
_this.props.navigation.goBack();
}}>
),
// 导航条右侧。可以是按钮或者其他视图控件
headerRight: (
color="red"
onPress={() => {
_this.props.navigation.navigate('Details')
}}/>
),
};
}
3、转场，页面跳转
（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、传值
（1）进入B页面时，A页面传值
this.props.navigation.navigate('homeNext', {message:"导航过来了"})
或：
this.props.navigation.push('homeNext', {message:"导航过来了"})
（2）进入B页面后，接收并使用A页面传过来的值