react-native学习笔记二====》配置路由（react-navigation3.x）

1.安装路由依赖react-navigation

npm install [email protected]

2.添加 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 代码：

扫描二维码关注公众号，回复： 8705535 查看本文章

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>
    );
  } 
}