React Navigation 安装及native-stack

最低要求：react-native版本： react-native >= 0.63.0

React Navigation由一些核心工具组成，这些工具会被导航器用来创建你应用中的导航结构。
为了预先加载安装工作，让我们也安装和配置大多数导航器使用的依赖项。

安装

yarn add @react-navigation/native

我们现在要安装的库是react-native-screens和react-native-safe-area-context。

yarn add react-native-screens react-native-safe-area-context

react-native-screens包需要一个额外的配置步骤才能在Android设备上正常工作。编辑MainActivity.java文件，它位于android/app/src/main/java/<你的包名>/MainActivity.java。

// Add the following code to the body of MainActivity class:

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

// and make sure to add an import statement at the top of this file:
import android.os.Bundle;

使用

现在，我们需要将整个应用程序包装在NavigationContainer中。通常你会在你的入口文件中这样做，比如index.js或App.js。

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

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

安装栈导航器

到目前为止，我们安装的库是导航器的构建块和共享基础，React Navigation中的每个导航器都有自己的库。要使用本地堆栈导航器，我们需要安装@react-navigation/native-stack:

yarn add @react-navigation/native-stack

createNativeStackNavigator是一个函数，它返回一个包含两个属性的对象:Screen和Navigator。它们都是用于配置导航器的React组件。Navigator应该包含Screen元素作为它的子元素来定义路由的配置。

NavigationContainer是一个组件，它管理我们的导航树并包含导航状态。该组件必须包装所有导航器结构。通常，我们会在应用的根目录下渲染这个组件，它通常是从app .js导出的组

// In App.js in a new project

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>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;