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即可，這樣做的好處是可以回傳參數。