React-Navigation5.X的基本用法

React-Navigation5.x看这篇就够了

持续更新。。。

前言

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

安装

1. 安装 @react-navigation/native

   • npm install @react-navigation/native

2. 安装 expo

   • npm install expo-cli --global

3. 安装依赖项

   • expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. 添加配置

   • 在android/app/build.gradle的dependencies添加两行
   • implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
   • implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

5. 使用

	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 (
	    
	      
	        		 路由匹配规则
	        

	          navigation.navigate('about')} title="abouty">		路由跳转
	      
	    
	  );
	}
	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中,这就是一个最基本的外框

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

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

路由出口

1. 安装npm install @react-navigation/stack

2. 创建一个堆栈导航器

3. createStackNavigator是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。

   • Stack.Navigator
     • initialRouteName： 默认匹配
   • Stack.Screen
     • name: 路由匹配
     • component： 匹配到显示的组件
     • options： 一些配置项，比如路由标题

4. 通过标签指定name属性和component属性来条状。name就等于path，component就是要显示的组件

function App() {
  return (
    
      							// 默认路由指向Home
        				// 指定了当匹配到Home路由时，HomeScreen组件显示
        		// 指定了当匹配到Details路由时，DetailsScreen组件显示
      
    
  );
}

路由跳转

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

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

官网的例子：

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 (
    
      Home Screen
       navigation.navigate('Details')}
      />			// 通过点击按钮跳转到Details
    
  );
}

除此之后还提供了几个方法:

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