zoukankan      html  css  js  c++  java
  • 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

    .

  • 相关阅读:
    2020-2021-1 20201329 《信息安全专业导论》第十一周学习总结
    python gui
    2020-2021-1 20201329 《信息安全专业导论》第十周学习总结
    2020-2021-1 20201329 《信息安全专业导论》第九周学习总结
    四则运算
    熟悉编程语言
    链表
    网站设计
    使用nmap扫描队友
    熟悉编程语言
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9614301.html
Copyright © 2011-2022 走看看