React Native 路由篇 react-navigation

React Native 使用 react-navigation 库可以帮助你创建一个美观的应用界面，并管理不同屏幕之间的导航。以下是一个简单的例子，展示如何使用 react-navigation 创建一个带有两个页面的基础应用：

1. 首先，确保你已经安装了 react-navigation 及其依赖项。如果没有安装，可以使用以下命令安装：

npm install @react-navigation/native

2. 接下来，你需要安装额外的依赖项，因为 react-navigation 依赖于其他库来处理屏幕转换等功能：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. 对于 iOS 开发者，需要执行以下命令来链接原生依赖库：

npx pod-install

4. 下面是一个简单的使用 react-navigation 创建导航的例子：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';
 
// 创建StackNavigator
const Stack = createStackNavigator();
 
// 定义Home和Details页面
function HomeScreen() {
  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>
      <Button
        title="Go back to Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}
 
// 应用程序的根组件
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这个例子展示了如何使用 createStackNavigator 创建一个简单的堆栈导航。NavigationContainer 是一个提供导航状态管理的容器，Stack.Navigator 是一个用于创建堆栈导航界面的组件，而 Stack.Screen 定义了堆栈中的每一个屏幕。在每个屏幕中，你可以使用 navigation.navigate 和 navigation.goBack 来控制屏幕之间的导航。