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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

　　

以上是 react-native学习笔记二====》配置路由（react-navigation3.x） 的全部内容， 来源链接： utcz.com/z/381509.html

回到顶部