ReactNative-ReactNavigation

React-Navigation5.x

前言

在做案例时，官网推荐的是这个框架来做为路由，而这个东西在近期也升级到了5.X的版本，和以前的版本好像是有些出入的，至少我在百度上查找的资料跟官网的用法有区别，所以写这个文档来学习一下，如果能够帮助到其他人那就更好了。

安装

安装 @react-navigation/native
- npm install @react-navigation/native
安装 expo
- npm install expo-cli --global
安装依赖项
- expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
添加配置
- 在android/app/build.gradle的dependencies添加两行
- implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
- implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

使用

Code

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Home from "./src/Home";
import About from "./src/About";

const Stack = createStackNavigator();

function App(navigation) {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />		 路由匹配规则
        <Stack.Screen name="about" component={About} />

         <Button onPress={() => navigation.navigate('about')} title="abouty"></Button>		路由跳转
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

起步

如果按照上面的步骤安装之后，在App.js中会自动引入import 'react-native-gesture-handler';这个具体的功能我也不是很清楚，没有这个却不行，官网的原话是：

Note: If you skip this step, your app may crash in production even if it works fine in development.

然后需要把整个应用程序包裹在NavigationContainer中,这就是一个最基本的外框

Code

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

路由出口

安装npm install @react-navigation/stack
创建一个堆栈导航器
createStackNavigator是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。
- Stack.Navigator
  - initialRouteName：默认匹配
- Stack.Screen
  - name: 路由匹配
  - component：匹配到显示的组件
  - options：一些配置项，比如路由标题

通过标签<Stack.Screen name="Home" component={Home} />指定name属性和component属性来条状。name就等于path，component就是要显示的组件

Code

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">							// 默认路由指向Home
        <Stack.Screen name="Home" component={HomeScreen} />				// 指定了当匹配到Home路由时，HomeScreen组件显示
        <Stack.Screen name="Details" component={DetailsScreen} />		// 指定了当匹配到Details路由时，DetailsScreen组件显示
      </Stack.Navigator>
    </NavigationContainer>
  );
}

路由跳转

通过对象navigation.navigate(name)进行跳转

可以配合事件，或者生命周期函数使用，例如：

官网的例子：

Code

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />			// 通过点击按钮跳转到Details
    </View>
  );
}

看到这里有人可能会迷惑，这个navigation是怎么来的，只要你匹配的路由的组件，那么该组件就可以在形参中拿到navigation对象，通过console.log(navigation)可以看到其他的一些方法

常用的一些其他方法:

navigation.push(“name”)
- 如果你已经在Home页面了，你在使用navigation.navigate("Home")显然是不会跳转的，因为已经在堆栈中，但是官网提供这个api，让你可以一直进入同一个页面
  navigation.push("Home")
navigation.goBack() 返回上一个页面
navigation.popToTop() 回到堆栈的第一个页面

路由传参

在navigation.navigate("Home")中是接收一个对象，对象中就可以传递一些参数