[React Native]React Navigation的使用方法

首先

本次将以备忘录的形式写下React Navigation的基础实现方法。

React Navigation是什么？

React Navigation是一个在React Native中用于管理屏幕转换和导航的库。React Navigation在该框架中提供了用于实现屏幕转换和导航的组件和API。

开始使用React Navigation

首先，我们要开始安装React Navigation。

npm install @react-navigation/native

yarn add @react-navigation/native

接下来，在App.jsx文件中进行以下的编写。
按照以下方式书写，React Navigation将被应用到应用程序中。

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

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

实现画面切换

我們將進行畫面轉換的實現。首先我們將介紹堆疊導航器。

本次，我們要創建兩個簡單的畫面，並且用按鈕進行畫面切換。請先建立一個名為 “screens” 的資料夾，並在其中創建 “HomeScreen.jsx” 和 “DetailScreen.jsx”。

import * as React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { Button } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate("Detail")
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: "pink",
    alignItems: "center",
    justifyContent: "center",
  },
});

import React from "react";
import { Button, Text, View } from "react-native";

export const DetailScreen = ({ navigation }) => {
  return (
    <View>
      <Button title="Go to Home" onPress={() => navigation.navigate("Home")} />
      <Text>{itemId}</Text>
    </View>
  );
};

首先，我们将在下面的代码中导入createNativeStackNavigator。

import { createNativeStackNavigator } from "@react-navigation/native-stack";

然后，将导航设置为参数。
通过使用导航，使得我们能够在代码上使用屏幕导航所需的功能。

export const HomeScreen = ({ navigation }) => {

然后，我们会放置一个用于屏幕转换的按钮。
要定义用户按下该按钮时的事件，在React Native中使用”onPress”。
在”onPress”的内容中，我们使用引数中的”navigation”指定”navigate”，然后将参数指定为”Detail”（屏幕名称）。

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

然后，您可以通过按下按钮来进行Detail画面的切换。

接下来，我们将介绍各种不同的导航器。

底部标签导航器

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { HomeScreen } from "./screens/HomeScreen";
import { NewMemoScreen } from "./screens/NewMemoScreen";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="HomeTab"
          component={MemoStack}
          options={{ headerShown: false, title: "HOME" }}
        />
        <Tab.Screen
          name="NewMemoScreen"
          component={NewMemoScreen}
          options={{ headerShown: false, title: "NEW" }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

底部标签导航器材料

安装的命令如下所示。

npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

示例代码如下。

<NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="HomeTab"
          component={MemoStack}
          options={{ headerShown: false, title: "HOME" }}
        />
        <Tab.Screen
          name="NewMemoScreen"
          component={NewMemoScreen}
          options={{ headerShown: false, title: "NEW" }}
        />
      </Tab.Navigator>
    </NavigationContainer>

材料顶部标签导航器

当您滑动时，页面将切换的是TabNavigation。

<NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      tabBarItemStyle: { width: 100 },
      tabBarItemStyle: { marginTop: 100 },
    }}
  >
    <Tab.Screen
      name="HomeTab"
      component={MemoStack}
      options={{ headerShown: false, title: "HOME" }}
    />
    <Tab.Screen
      name="NewMemoScreen"
      component={NewMemoScreen}
      options={{ headerShown: false, title: "NEW" }}
    />
  </Tab.Navigator>
</NavigationContainer>

请参考

以下是我参考的文件。

最后

如果你愿意的话，我还有很多其他的文章，希望你能读读。