从零开始之如何在React Native中使用导航

好的，让我们开始学习如何在React Native中使用导航。

安装React Navigation

首先，你需要安装React Navigation库。在项目文件夹中打开终端窗口，并运行以下命令：

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

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

这将安装React Navigation库及其依赖项。

接着，你需要安装React Navigation的堆栈导航器。在终端窗口中运行以下命令：

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

创建屏幕组件

在项目中创建一个新的文件夹，例如“screens”，用于存放你的屏幕组件。接着，在该文件夹中创建两个新的文件，例如“HomeScreen.js”和“DetailsScreen.js”，用于编写你的两个屏幕组件。

在“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>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

在该文件中，我们创建了一个名为HomeScreen的函数式组件。该组件接受一个名为“navigation”的属性，用于处理导航逻辑。在该组件中，我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时，我们使用navigation.navigate()方法将用户导航到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>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

export default DetailsScreen;

在该文件中，我们创建了一个名为DetailsScreen的函数式组件。该组件接受一个名为“navigation”的属性，用于处理导航逻辑。在该组件中，我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时，我们使用navigation.navigate()方法将用户导航回Home屏幕。

创建导航器

在项目中创建一个新的文件，例如“Navigator.js”，用于编写你的导航器。在该文件中，编写以下代码：

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()方法创建一个名为Stack的堆栈导航器。在该导航器中，我们定义了两个屏幕：Home和Details。我们将这些屏幕与之前创建的组件文件（HomeScreen.js和DetailsScreen.js）相关联。

在应用程序中使用导航器

在应用程序的主文件中，例如“App.js”，引入你的导航器：

import React from 'react';
import Navigator from './Navigator';

const App = () => {
  return (
    <Navigator />
  );
}

export default App;

这个文件中，我们引入了刚才创建的导航器，并将其作为组件放置在应用程序中。

运行应用程序

最后，运行应用程序，查看你的导航器是否正常工作：

react-native run-android

或者

react-native run-ios

你应该能够在模拟器或真机上看到一个具有两个屏幕的应用程序，用户可以在这两个屏幕之间进行导航。

这就是使用函数式组件在React Native中使用导航的基本步骤。你可以继续学习更高级的React Navigation功能，例如自定义标题、传递参数等等。

注意事项

当我们添加这些库之后，比如react-native-safe-area-context 可能就编译卡住或者失败提示kotlin 等错误，那经过观察build.gradle ，会取到kotlinVersion ，我们可以指定 kotlinVersion = "1.6.20" 版本，国内下载库的时候，非常慢，我们可以设置阿里云镜像仓库。

...
buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 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
}