react-navigation 页面跳转 及 传参
Posted crazycode2
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-navigation 页面跳转 及 传参相关的知识,希望对你有一定的参考价值。
1.配置路由
export const AppNavigator = createStackNavigator ( { Guide: { // 引导页 screen: GuidePage }, Launch: { // 启动页 screen: LaunchPage }, Login: { // 登录页 screen: LoginPage }, Main: { // 主页面 screen: MainPage }, HomeDetail: { // 首页--详情页 screen: HomeDetailPage }, MineList: { // 我的--列表页 screen: MineListPage }, MineCatalog: { // 我的--目录页 screen: MineCatalogPage }, MineDetail: { // 我的--详情页 screen: MineDetailPage }, TeasetApp: { screen: TeasetApp, navigationOptions: { header: null } } }, { initialRouteName: ‘Login‘, // 默认启动页 navigationOptions: { header: null } } );
2.设置 顶部导航栏
//设置顶部导航栏的内容 static navigationOptions = ({navigation, screenProps}) => ({ //左侧标题 headerTitle: ‘我是主页面‘, //设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题 headerBackTitle: null, //顶部标题栏的样式 headerStyle: styles.headerStyle, //顶部标题栏文字的样式 headerTitleStyle: styles.headerTitleStyle, });
3.页面跳转
this.props.navigation.navigate(‘HomeDetail‘, {detail: item})
4.接收参数
this.props.navigation.state.params.detail
.
以上是关于react-navigation 页面跳转 及 传参的主要内容,如果未能解决你的问题,请参考以下文章