好的，讓我們開始學(xué)習(xí)如何在React Native中使用導(dǎo)航。

1. 安裝React Navigation

首先，你需要安裝React Navigation庫(kù)。在項(xiàng)目文件夾中打開終端窗口，并運(yùn)行以下命令：

npm install @react-navigation/native
或者
yarn add  @react-navigation/nativeyarn add react-native-screens react-native-safe-area-context

這將安裝React Navigation庫(kù)及其依賴項(xiàng)。

接著，你需要安裝React Navigation的堆棧導(dǎo)航器。在終端窗口中運(yùn)行以下命令：

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

2. 創(chuàng)建屏幕組件

在項(xiàng)目中創(chuàng)建一個(gè)新的文件夾，例如“screens”，用于存放你的屏幕組件。接著，在該文件夾中創(chuàng)建兩個(gè)新的文件，例如“HomeScreen.js”和“DetailsScreen.js”，用于編寫你的兩個(gè)屏幕組件。

在“HomeScreen.js”文件中，編寫以下代碼：

import React from 'react';
import { Button, Text, View } from 'react-native';const HomeScreen = ({ navigation }) => {return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Home Screen</Text><Buttontitle="Go to Details"onPress={() => navigation.navigate('Details')}/></View>);
}export default HomeScreen;

在該文件中，我們創(chuàng)建了一個(gè)名為HomeScreen的函數(shù)式組件。該組件接受一個(gè)名為“navigation”的屬性，用于處理導(dǎo)航邏輯。在該組件中，我們使用View組件來創(chuàng)建一個(gè)包含文本和按鈕的屏幕。當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們使用navigation.navigate()方法將用戶導(dǎo)航到Details屏幕。

在“DetailsScreen.js”文件中，編寫以下代碼：

import React from 'react';
import { Button, Text, View } from 'react-native';const DetailsScreen = ({ navigation }) => {return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text><Buttontitle="Go to Home"onPress={() => navigation.navigate('Home')}/></View>);
}export default DetailsScreen;

在該文件中，我們創(chuàng)建了一個(gè)名為DetailsScreen的函數(shù)式組件。該組件接受一個(gè)名為“navigation”的屬性，用于處理導(dǎo)航邏輯。在該組件中，我們使用View組件來創(chuàng)建一個(gè)包含文本和按鈕的屏幕。當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們使用navigation.navigate()方法將用戶導(dǎo)航回Home屏幕。

3. 創(chuàng)建導(dǎo)航器

在項(xiàng)目中創(chuàng)建一個(gè)新的文件，例如“Navigator.js”，用于編寫你的導(dǎo)航器。在該文件中，編寫以下代碼：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';const Stack = createStackNavigator();const Navigator = () => {return (<Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailsScreen} /></Stack.Navigator>);
}export default Navigator;

在該文件中，我們使用createStackNavigator()方法創(chuàng)建一個(gè)名為Stack的堆棧導(dǎo)航器。在該導(dǎo)航器中，我們定義了兩個(gè)屏幕：Home和Details。我們將這些屏幕與之前創(chuàng)建的組件文件（HomeScreen.js和DetailsScreen.js）相關(guān)聯(lián)。

4. 在應(yīng)用程序中使用導(dǎo)航器

在應(yīng)用程序的主文件中，例如“App.js”，引入你的導(dǎo)航器：

import React from 'react';
import Navigator from './Navigator';const App = () => {return (<Navigator />);
}export default App;

這個(gè)文件中，我們引入了剛才創(chuàng)建的導(dǎo)航器，并將其作為組件放置在應(yīng)用程序中。

5. 運(yùn)行應(yīng)用程序

最后，運(yùn)行應(yīng)用程序，查看你的導(dǎo)航器是否正常工作：

react-native run-android

或者

react-native run-ios

你應(yīng)該能夠在模擬器或真機(jī)上看到一個(gè)具有兩個(gè)屏幕的應(yīng)用程序，用戶可以在這兩個(gè)屏幕之間進(jìn)行導(dǎo)航。

這就是使用函數(shù)式組件在React Native中使用導(dǎo)航的基本步驟。你可以繼續(xù)學(xué)習(xí)更高級(jí)的React Navigation功能，例如自定義標(biāo)題、傳遞參數(shù)等等。

注意事項(xiàng)

當(dāng)我們添加這些庫(kù)之后，比如react-native-safe-area-context 可能就編譯卡住或者失敗提示kotlin 等錯(cuò)誤， 那經(jīng)過觀察build.gradle ，會(huì)取到kotlinVersion ，我們可以指定 kotlinVersion = "1.6.20" 版本， 國(guó)內(nèi)下載庫(kù)的時(shí)候，非常慢，我們可以設(shè)置阿里云鏡像倉(cāng)庫(kù)。

...
buildscript {ext {buildToolsVersion = "33.0.0"minSdkVersion = 21compileSdkVersion = 33targetSdkVersion = 33// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.ndkVersion = "23.1.7779620"kotlinVersion = "1.6.20"}repositories {maven {url 'https://maven.aliyun.com/repository/public/'}maven {url 'https://maven.aliyun.com/repository/central'}maven {url 'https://maven.aliyun.com/repository/google/'}maven {url 'https://maven.aliyun.com/repository/gradle-plugin/'}google()mavenCentral()}...

buildscript {def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['RNSAC_kotlinVersion']repositories {mavenCentral()}dependencies {classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")}
}def getExtOrDefault(name, defaultValue) {return rootProject.ext.has(name) ? rootProject.ext.get(name) : defaultValue
}