zoukankan      html  css  js  c++  java
  • react-native学习笔记二====》配置路由(react-navigation3.x)

    1.安装路由依赖react-navigation

    npm install react-navigation@3.11.0

    2.添加手势库 react-native-gesture-handler 组件,

    npm install --save react-native-gesture-handler

    成功后为:

    3.安装成功之后,别忘了 link:

    react-native link react-native-gesture-handler

    4.新建 pages 文件夹 ,在 pages 下新建 routes.js文件

    import {createStackNavigator,createAppContainer} from 'react-navigation';
    import Pagea from './pagea'; import Pageb from './pageb';
    
    const Routes=createStackNavigator({
      pagea: {
        screen: Pagea,
        navigationOptions: () => ({
          title:'A页面'
        })
      },
      pageb:{
        screen:Pageb,
        navigationOptions:()=>({
          title: 'B页面'
        })
      } 
    },{initialRouteName:'pagea' }); 
    export default createAppContainer(Routes);

    5.修改 index.js 文件:

    import {AppRegistry} from 'react-native';
    import Routes from './pages/routes';
    import {name as appName} from './app.json';
    AppRegistry.registerComponent(appName, () => Routes);
    

    6.在pages文件夹下,新建 pagea.js和pageb.js

    pagea.js 代码:

    import React,{Component} from 'react';
    import {View,Text,Button} from 'react-native';
    export default class Pagea extends Component{
      constructor(props){
        super(props);
      }
      render(){
        let {navigate}=this.props.navigation;
        return (
        <View>
          <Text>这是A页面</Text>
          <Button title={'跳转B页面'} onPress={()=>navigate('pageb')}/>
        </View>
        );
      } 
    }
    

    pageb.js 代码:

    import React,{Component} from 'react';
    import {View,Text,Button} from 'react-native';
    export default class Pageb extends Component{
      constructor(props){
        super(props);
      }
      render(){
        let {goBack}=this.props.navigation;
        return (
          <View>
            <Text>这是B页面</Text>
            <Button title={'跳转A页面'} onPress={()=>goBack()}/>
          </View>
        );
      } 
    }

      参考资料:https://blog.csdn.net/u013783000/article/details/92776345

      

  • 相关阅读:
    fiddler---Fiddler模拟接口数据(mock)
    Intellij IDEA gradle项目目录介绍
    Windows netstat 查看端口、进程占用
    SpringMVC和spring常见面试题总结
    mybatis一级缓存二级缓存
    Mybatis常见面试题总结
    Spring容器
    深入理解JVM类加载机制
    理解Spring框架中Bean的5个作用域
    编程语言的分类与关系
  • 原文地址:https://www.cnblogs.com/miaSlady/p/12213035.html
Copyright © 2011-2022 走看看