react-native笔记（七）：路由

自从谷歌浏览器停止了翻译服务，有点头大，英文文档看不懂，着实添加了不少麻烦

现在只能用微软的edge浏览器解燃眉之急了

以下都是在安卓项目中的操作

安装

npm install @react-navigation/native

npm install @react-navigation/native

安装依赖

npm install react-native-screens react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context

以下文档提示一个必须修改代码的地方

react-native-screens软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。

需要编辑文件的路径：

MainActivity.javaandroid/app/src/main/java/ your package name /MainActivity.java

将以下代码添加到类的主体中：MainActivity

java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并确保在此文件的顶部添加导入语句：

java

import android.os.Bundle;

import android.os.Bundle;

此更改是必需的，以避免与视图状态相关的崩溃在活动重新启动期间不一致地保留。

安装堆栈导航器，页面之间的跳转需要它

npm install @react-navigation/native-stack

npm install @react-navigation/native-stack

选项卡导航今天不涉及，看文档把，也比较简单

文档地址

开始使用

项目根目录下，新建router文件夹，然后文件夹下新建index.js文件

现在项目有2个路由页

tabbar页和list页

tabbar页是首页个人中心等，用底部选项卡来回切换的页面

list页是首页点击跳转的页面

import React from 'react';

// 路由容器
import {NavigationContainer} from '@react-navigation/native';

// 堆栈栈式导航
import {createNativeStackNavigator} from '@react-navigation/native-stack';

//列表页
import list from '../pages/list'

//首页
import Tabbar from '../layout/tabbar'


const Stack = createNativeStackNavigator();

const Router = () => {
    return (
            <NavigationContainer>
                <Stack.Navigator 
                    screenOptions={{
                        headerShown: false,//导航器默认带标题栏，不需要所以false掉
                    }}
                >
                    <Stack.Screen 
                        name="home" //路由名字
                        component={Tabbar} //路由对应的组件页
                       />
                    <Stack.Screen 
                        name="list" //路由名字
                        component={Index} //路由对应组件页
                    />
                </Stack.Navigator>
            </NavigationContainer>
    );
};

export default Router;

import React from 'react';

// 路由容器
import {NavigationContainer} from '@react-navigation/native';

// 堆栈栈式导航
import {createNativeStackNavigator} from '@react-navigation/native-stack';

//列表页
import list from '../pages/list'

//首页
import Tabbar from '../layout/tabbar'


const Stack = createNativeStackNavigator();

const Router = () => {
    return (
            <NavigationContainer>
                <Stack.Navigator 
                    screenOptions={{
                        headerShown: false,//导航器默认带标题栏，不需要所以false掉
                    }}
                >
                    <Stack.Screen 
                        name="home" //路由名字
                        component={Tabbar} //路由对应的组件页
                       />
                    <Stack.Screen 
                        name="list" //路由名字
                        component={Index} //路由对应组件页
                    />
                </Stack.Navigator>
            </NavigationContainer>
    );
};

export default Router;

在需要跳转的组件里

路由页面会自动传递一个props参数:navigation

需要跳转时，在事件里调用navigation.push('路由名')}即可

const Home = ({navigation})=> {
    return (
        <View >
            <Statusbar/>
            <Header leftTitle="Week"/>
            <WaterfallList onPress={()=>navigation.push('list')}/>
        </View>
    )
}

const Home = ({navigation})=> {
    return (
        <View >
            <Statusbar/>
            <Header leftTitle="Week"/>
            <WaterfallList onPress={()=>navigation.push('list')}/>
        </View>
    )
}

即可跳转

这是最简单的实现方式

但是，一般我们常用的模式是tabbar和路由嵌套的模式，官方文档有讲，这里再简单说一下

就是首页不是home页，而是一个tabbar的导航页，这样，我们就要在tabbar导航页，对每个导航页面再做一个props传递

比如tabbar导航页显示的首页Home

用props把navigation传递下去，我这里是类组件形式

html

<Home navigation={this.props.navigation} />

<Home navigation={this.props.navigation} />

函数式组件就是下面了

html

<Home navigation={props.navigation} />

<Home navigation={props.navigation} />

这样就可以实现，tabbar和路由组合使用了

本文只讲上手使用，更多详细用法，建议看官方文档

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

react-native笔记（七）：路由 ​

反馈信息 ​

react-native笔记（七）：路由

反馈信息