react-native的路由导航相关配置

在React Native中，使用react-navigation库时，通常需要在入口文件（通常是 index.js）配置导航器（navigator）和初始路由（initial route）。以下是一个基本的配置示例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { View, Text } from 'react-native';
 
// 定义导航器
const Stack = createStackNavigator();
 
// 定义屏幕
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}
 
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}
 
// 配置导航器
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default App;

在这个例子中，我们创建了一个栈导航器（createStackNavigator），并定义了两个屏幕：HomeScreen 和 DetailsScreen。在 <NavigationContainer> 中，我们通过 <Stack.Navigator> 定义了导航器的路由结构，并通过 <Stack.Screen> 组件指定了每个路由的屏幕和名称。这样，我们就完成了基本的路由导航配置。