React Native 学习之 React Navigation初体验Hello React Navigation(导

Hello React Navigation(导航栏)

React-Native 的一款导航插件

第一步：安装主库

npm install @react-navigation/native
// 或者使用 yarn
yarn add @react-navigation/native

第二步：安装主库依赖的三方库

因为新版react-navigation依赖一些第三方库，所以安装时需要同时引入：

npm install react-native-screens react-native-safe-area-context
// 或者使用 yarn
yarn add react-native-screens react-native-safe-area-context

第三步：代码配置

Android部分的配置

在android/app/src/main/java//MainActivity.java中添加如下代码：

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

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

并确保在该文件的顶部添加import语句

import android.os.Bundle;

iOS部分的配置

执行：

npx pod-install ios

第四步：如何使用

目前为止，我们安装的都是导航器的基础和构建模块，React Navigation 中每种类型导航器都有自己单独的库。接下来我们要是用的是堆栈导航器，需要我们安装 @react-navigation/native-stack

npm install @react-navigation/native-stack
// 或者使用 yarn
yarn add @react-navigation/native-stack

堆栈导航器初始化

import 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();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

运行此代码，可以看到一个空的导航栏和一个显示Home Screen文本的内容区域，导航栏和内容区域的样式现在是堆栈导航器的默认配置，稍后我们可以学习如何配置它们。

让我们添加第二个屏幕到我们的堆栈导航器，并配置主屏幕首先呈现:

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

现在我们的堆栈有两个路由，一个Home路由和一个Details路由。
可以使用Screen组件指定路由。
Screen组件接受一个name prop和一个component prop，前者对应于我们要导航的路由名称，后者对应于它要渲染的组件名称。
还可以接收一个参数进行标题配置，例如：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

接下来我们介绍如何从一个路由切换至另一个路由

第五步：路由切换

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-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')}
      />
    </View>
  );
}

// ... 上一节的其他代码

navigation 参数会传递到堆栈导航器的每个屏幕组件中，使用 navigation.navigate 方法可以进行路由切换
我们只能导航到导航器中定义的路由，不能导航到任意组件（如果这样做会抛出错误）

如果我们从Details屏幕再次导航到Details路由，会发生什么?

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

答案是什么也不做，这样做显然是符合逻辑的

我们可以将导航更改为push。这允许我们表达添加另一个路由的意图，而不管现有的导航历史。

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

每次调用push时，我们都会向导航堆栈添加一个新路由。当你调用navigate时，它首先会尝试找到一个具有该名称的现有路由，并且只有在堆栈中还没有路由的情况下才会推送一个新的路由。

第六步：路由回退

当可以从活动屏幕返回时，本机堆栈导航器提供的标题将自动包含一个返回按钮(如果导航堆栈中只有一个屏幕，那么您没有任何东西可以返回，因此没有返回按钮)。

也可以使用 navigation.goBack() 进行手动回退

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

在安卓设备中，如果点击物理返回键会出发 goBack 函数

另一个常见的需求是能够返回多个屏幕——例如，如果您在堆栈中有多个屏幕，并且希望解散所有屏幕以返回第一个屏幕。在本例中，我们知道我们想回到Home，所以我们可以使用navigate('Home')(而不是push! 尝试一下，看看有什么不同)。另一种替代方法是navigation.popToTop()，它会返回到堆栈中的第一个屏幕。

显然如果使用 push 将在堆栈中添加一个路由，而 navigate 方法会检测路由中是否包含该路由，如果有则导航到栈中路由状态

本文章内容全部来源于官网 react-navigation

React Native 学习之 React Navigation初体验