React Navigation的基本使用（一）

React Navigation的基本使用（一）

1、下载依赖

//核心构建模块
yarn add  @react-navigation/native
//堆栈导航器
yarn add @react-navigation/stack

//依赖的库
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

说明：React Navigation中的几个导航器模块都是分开的，最基本就是堆栈导航器，还有底部导航器、抽屉导航器等。

2、基本案例

import * as React from 'react';
import { 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')}
      />
    </View>
  );
}

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

const Stack = createStackNavigator();

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

export default App;

（1）基本概念

• NavgationContainer：是管理导航树并包含导航状态的组件。该组件必包裹所有导航器结构。通常，我们会在应用程序的根目录下渲染此组件，通常是在App.js中。
• createStackNavigator：创建堆栈导航器的方法，其返回时一个包含Navigator和Screen两个属性的对象。其中Screen必须作为Navigator的子组件。
• Navigator：是一个将路由配置作为其子级的组件。
• Screen：相当于一个路由。其中name、component属性是必须的，name是路由（可以理解为一个页面，用于跳转）在app中唯一的名称，component是路由的具体内容。

当然导航器和路由都有一些可配置的属性，这里就不细讲。

（2）路由跳转

每个屏幕screen component在加载是都会被注入一个navigation属性，它包含了路由跳转的方法。

以下介绍基本的用法

navigate

navigation.navigate(name, params)

• name -已经在app中定义了的路由名称（screen 组件的name属性 ）。
• params -传递参数到路由页面中。

goBack

返回到导航器中的上一个页面

注：navigate也可起到返回上一个页面的效果，比如，你可以从Home跳转到Detail后，在Detail中使用navigate并把name属性设置为Home即可，这样做的好处是可以回传参数。