reactnative 路由

React Native提供了一个路由系统，可以在移动端实现更好的路由导航体验。使用React Navigation库来实现路由功能。

安装React Navigation库的步骤如下：
1. 打开终端，进入项目目录。
2. 运行以下命令安装React Navigation相关的依赖：

   npm install @react-navigation/native
   npm install @react-navigation/stack
   npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

在React Native项目中使用路由的步骤如下：
1. 在项目中引入所需的React Native组件和React Navigation库的相关组件：

   import * as React from 'react';
   import {View, Text} from 'react-native';
   import {NavigationContainer} from '@react-navigation/native';
   import {createNativeStackNavigator} from '@react-navigation/native-stack';
   import APage from './pages/APage';
   import BPage from './pages/BPage';
   import CPage from './pages/CPage';
   import DPage from './pages/DPage';

2. 创建一个栈式导航（Stack Navigator）：

   const Stack = createNativeStackNavigator();

3. 在App组件中，使用NavigationContainer组件包裹栈式导航，并设置导航的样式和选项：

   function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator screenOptions={{ headerStyle: {backgroundColor: 'red'}, headerTitleStyle: {color: 'white'}, }}>
           <Stack.Screen name="A" component={APage} options={{ headerTitle: '首页', headerStyle: {backgroundColor: 'orangered'}, }} />
           <Stack.Screen name="B" component={BPage} />
           <Stack.Screen name="C" component={CPage} />
           <Stack.Screen name="D" component={DPage} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }

4. 导出App组件作为根组件：

   export default App;

这样，你就可以在React Native应用中使用React Navigation库来实现路由导航功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [ReactNative 基础 - 14 （路由、跳转、传参）](https://blog.csdn.net/Janicecat/article/details/122047865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [react-native路由总结](https://download.csdn.net/download/weixin_38644599/14878527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]