注：所用实例及介绍大部分来源官网，本文仅为个人的一次知识梳理
官网地址：https://reactnavigation.org/en/
github网址:https://github.com/react-navigation/react-navigation
React Navigation 是当前使用较火的路由与导航解决方案，也是官方主推的第三方开源。
其特点：1、易于使用 2、兼容iOS和Android 3、完全可定制 4、平台可扩展
1、引入
yarn add react-navigation 或者使用 npm install --save react-navigation
2、使用
2.1，页面路由配置
在React Native中，从App.js导出的组件是应用程序的入口点（或根组件） -- 它处在所有组件的最下层。 与导出 stack navigator 相比，对应用程序根部的组件进行更多的控制通常更有用，所以我们导出一个只渲染了 stack navigator 的组件。（推荐）
const RootStack = createStackNavigator({
Home: {
screen: HomeScreen
},
//、、、其他界面注册
});
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
如果路由页面没有其他配置，我们不需要使用{screen：HomeScreen}配置格式，可简写为
const RootStack = createStackNavigator({
Home: HomeScreen
});
统一页面标题配置，为了清晰期间我定义一个常量做配置如下：
const NvOptions={
//设置滑动返回的距离
gestureResponseDistance:{horizontal:300},
//初始化第一个加载的页面，默认为第一个
initialRouteName: 'Home',
//初始页面参数
// initialRouteParams:{user:'AAAA'},
navigationOptions: {
// 背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。
headerStyle: {backgroundColor:'red'},//标题的样式
headerTitle:'默认标题',
headerBackTitle:'返回',//ios返回按钮文字
headerTintColor:'white', //返回按钮及标题颜色
headerTitleStyle: {//标题栏文字的样式
color: 'white',
fontSize: 16,
//居中显示，android上不生效，使用 flex: 1, textAlign: 'center',
// alignSelf: 'center',
flex: 1,
textAlign: 'center',
},
//返回按钮文字样式
headerBackTitleStyle:{
color:'white',
},
// 是否支持滑动返回手势，iOS默认支持，安卓默认关闭
gesturesEnabled:true,
}
}
const RootStack = createStackNavigator({
Home: HomeScreen
},NvOptions);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
2.2，页面跳转及参数传递获取
//将新路由推送到堆栈导航器，如果它尚未在堆栈中，则跳转到该页面（跳转推荐）
this.props.navigation.navigate('Details',{'params','111'}) //对象参数
//push可多次推送路由，重复添加进堆栈
this.props.navigation.push('Details')
//主动返回上一个界面调用
this.props.navigation.goBack()
//返回堆栈中的第一个页面
this.props.navigation.popToTop()
//获取参数，访问 params 对象，如果未指定参数，则为null。
this.props.navigation.state.params
//获取参数（推荐），params为kay值需对应default value为默认值
this.props.navigation.getParam('params','default value')
多页面跳转截图
2.3，标题栏配置
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
/* render function, etc */
}
将传递的参数，作为标题
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
/* render function, etc */
}
调整单个页面标题样式，作用相当于上面NvOptions，会覆盖NvOptions样式，NvOptions作用于所有路由界面，下面代码，仅作用于本界面，一般仅设置title，其他由NvOptions统一设置
class HomeScreen extends React.Component {
static navigationOptions = {
//header:null,设置header为null,可去除标题
title: 'Home',
headerStyle: {//包装标题的View的样式对象,
backgroundColor: '#f4511e', //标题背景色
},
headerTintColor: '#fff', //返回按钮和标题都使用这个属性作为它们的颜色
headerTitleStyle: { //标题文字样式
fontWeight: 'bold',
},
headerRight: <View/> //占位，防止android,不居中
};
/* render function, etc */
}
2.4标题栏添加按钮
1、在navigationOptions中this绑定的不是 HomeScreen 实例，不能使用与this相关的setState等任何方法。
2.有一个社区开发包，用于渲染标题栏中的按钮，并提供正确的样式 react-navigation-header-buttons 。
标题栏和其所属的页面之间的交互实例代码如下，
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
//1.这里设置参数为方法2.按钮点击事件里面进行获取
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
//标题按钮点击调用的方法
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
2.5自定义返回按钮：
您可以使用headerBackTitle和headerTruncatedBackTitle（阅读更多）更改返回按钮旁边显示的文本。
要自定义返回按钮图片，你可以使用 headerBackImage 。
覆盖返回按钮
headerLeft选项接受一个React Component，会覆盖返回按钮及点击事件
2.6 Stack navigator全屏及嵌套（可作用于两种以上风格页面或两个堆栈互不影响的情况）
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,//第一个StackNavigator路由导航
},
MyModal: {
screen: ModalScreen,
},
},
{//全屏设置
mode: 'modal',
headerMode: 'none',
}
);
网友评论