AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

react-navigation6.x路由库的基本使用

2022-05-13 608
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： react-navigation6.x路由库的基本使用

目录


react-native项目初始化

安装react-native项目

react-navigation路由库安装

基本栈路由createNativeStackNavigator

使用路由库

路由跳转与路由传参

设置路由标题

路由样式属性

自定义标题组件

标题按钮

标签路由createBottomTabNavigator

包

示例

标签路由图标和样式


react-native项目初始化


打开cmd，cd到在要进行rn项目建立的文件夹。

npx react-native init testRN

这里我的项目名设置为testRN，可以自行设定。

安装react-native项目

连接安卓虚拟机或者usb调试真机，cd进创建好的项目根目录，yarn android安装并启动。

yarn android

初次安装完毕之后，手机未断连的情况的话，后续只需虚拟机或者手机进入项目app，然后pc在项目根目录yarn start启动就可以了不用再次安装，断连之后可能得重新安装。

yarn start

启动好了之后在cmd界面按r可以更新。

react-navigation路由库安装

内容建立在android端测试，我没有测试ios。

一口气安装下列包。

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

对安卓进行额外配置，在testRN\android\app\src\main\java\com\testrn修改MainActivity.java文件。

image.png

代码：

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

基本栈路由createNativeStackNavigator

使用路由库

修改app.js为以下代码

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}
const Stack = createNativeStackNavigator();
function App() {
  return (
    // NavigationContainer为路由的容器，将相关内容都放在他中间
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen为路由的窗口，name设置窗口名，用于跳转，窗口的组件内容放在component */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

image.png

路由跳转与路由传参

import * as React from 'react';
// 添加Button
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
                //  添加navigation参数
function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      {/* 添加跳转按钮 */}
      <Button
        title="Go to Details"   
        // navigation.navigate('Details')用于跳转，其中的Details指向对应的窗口name
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}
const Stack = createNativeStackNavigator();
function App() {
  return (
    // NavigationContainer为路由的容器，将相关内容都放在他中间
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen为路由的窗口，name设置窗口名，用于跳转，窗口的组件内容放在component */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

设置路由标题

  1. 窗口默认会使用name作为标题名，当然也可以自行设定。我们用my home代替Home作为导航标题。
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'my home'}}  />

通常一级页面跳转去二级页面时，也许会根据内容不同展示不同的标题，这时候有就需要动态配置title。

<Stack.Screen name="Details" component={DetailsScreen}
   options={({ route }) => ({ title: route.params.title })}
/>

然后只要在一级页面跳转时传递title就可以了

<Button
   title="Go to Details"
  // navigation.navigate('Details')用于跳转，其中的Details指向对应的窗口name
   onPress={() => navigation.navigate('Details', { title: '二级页面' })}
/>

<Button
   title="Go to Details"
  // navigation.navigate('Details')用于跳转，其中的Details指向对应的窗口name
   onPress={() => navigation.navigate('Details', { title: '二级页面' })}
/>

注意这里如果一级页面没有传递title，最好传递一个空对象或者在二级窗口上设置初始值否则会报错。

还可以手动更新title，使用navigation.setOptions()，其修改的是screen上的options中的属性。

<Button
   title="Update the title"
   onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

路由样式属性


标题居中，可以在Navigator上设置screenOptions的headerTitleAlign属性，

headerStyle：路由上方那一块的样式。

headerTintColor：修改标题字体颜色，也可以在headerTitleStyle修改color，是一个效果。

headerTitleStyle：标题字体样式。

<Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          headerTitleAlign: 'center',
        }}>
</Stack.Navigator>

自定义标题组件

设置headerTitle回调返回一个函数式组件，组件内自定义，可以是图片。

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('./src/img/details.png')}
    />
  );
}
<Stack.Screen name="Home" component={HomeScreen}
   options={{
     title: 'My home',
     headerTitle: (props) => <LogoTitle {...props} />
   }}
/>

标题按钮

一样是在screen的options上，存在headerRight可以放按钮。

        <Stack.Screen name="Home" component={HomeScreen}
          options={{
            title: 'My home',
            headerTitle: (props) => <LogoTitle {...props} />,
            headerRight: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
              />
            ),
          }}
        />

headerBackImageSource可以修改回退按钮图片。

        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => (
            {
              title: route.params.title,
              headerBackImageSource: detailsImg,
            }
          )}
        />

标签路由createBottomTabNavigator

包

yarn add @react-navigation/bottom-tabs

示例

  1. Tab创建标签修改为createBottomTabNavigator，基本栈路由是createNativeStackNavigator。
  2. 用法类似，NavigationContainer包裹，Tab.Navigator路由，Tab.Screen路由页面。
import * as React from 'react';
import {Button, View, Text, TextInput, Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}
function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
const Tab = createBottomTabNavigator();
function App() {
  return (
    // NavigationContainer为路由的容器，将相关内容都放在他中间
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
export default App;

标签路由图标和样式

  1. route.name判断是哪个路由，focused判断该路由是否选中，两个结合判断可以将标签选中未选中的图标都给定义了。
  2. tabBarActiveTintColor修改标签路由文字选中颜色，tabBarInactiveTintColor未选中颜色。
//导入两个路由标签选中与未选中的图标共四张图
import home from './src/img/home.png';
import homeSelect from './src/img/homeSelect.png';
import settings from './src/img/settings.png';
import settingsSelect from './src/img/settingsSelect.png';

    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let icon;
            if (route.name === 'Home') {
              icon = focused ? homeSelect : home;
            } else if (route.name === 'Settings') {
              icon = focused ? settingsSelect : settings;
            }
            // You can return any component that you like here!
            return <Image source={icon} style={{width: 20, height: 20}} />;
          },
          tabBarActiveTintColor: 'lightblue',
          tabBarInactiveTintColor: 'black',
        })}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>

image.png

文章标签：
Java
iOS开发
Android开发
资源调度
移动开发
关键词：
React Native库
React Native路由
react.js路由
react.js库
在下月亮有何贵干
目录
相关文章
六卿
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法，使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式，可以显著减少初始包的大小，从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果，并提供了使用前后的加载时间对比，说明了懒加载对性能的提升作用。
六卿
877 2
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
蓝易云
|
5月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时，考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线，Vue可能是更好的选择。相反，如果项目需要更大的灵活性，或者项目团队已经有React的经验，那么React可能是更合适的选择。
蓝易云
245 13
前端徐徐
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”，介绍了React及其常用库。React是由Meta开发的JavaScript库，用于构建动态用户界面，广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景，帮助开发者提升开发效率和代码质量。
前端徐徐
445 4
React开发需要了解的10个库
夏天49597
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库，涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容，并通过代码案例进行说明。适合初学者和进阶开发者参考。
夏天49597
905 8
夏天49597
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫（Guarded Routes），使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态，实现 `PrivateRoute` 组件进行路由保护，并在 `App.js` 中使用。文章还讨论了常见问题和易错点，提供了处理异步操作的示例，帮助开发者提升应用的安全性和用户体验。
夏天49597
511 1
不穿大酷头
|
9月前
|
前端开发 UED
在React Router中，如何处理路由的404错误页面？
在React Router中，如何处理路由的404错误页面？
不穿大酷头
331 57
不穿大酷头
|
9月前
|
前端开发
如何在React Router中进行路由重定向？
如何在React Router中进行路由重定向？
不穿大酷头
578 57
九月天空
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
九月天空
372 95
你都不懂
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
你都不懂
137 2
React——路由Route
夏天49597
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router，一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案，如路由嵌套、动态路由和路由守卫等，并提供代码示例。通过学习本文，开发者可以更高效地使用 React Router，提升应用的导航体验和安全性。
夏天49597
836 19