码迷,mamicode.com
首页 > 其他好文 > 详细

react-navigation 页面跳转 及 传参

时间:2018-09-09 19:52:19      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:列表   nec   export   his   back   样式   ack   rbac   navigator   

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 页面跳转 及 传参

标签:列表   nec   export   his   back   样式   ack   rbac   navigator   

原文地址:https://www.cnblogs.com/crazycode2/p/9614301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!