react-native 路由react-navigation6.0x

在React Native中使用react-navigation库进行路由时，可以创建一个简单的应用程序，其中包含主页和详情页。以下是如何设置react-navigation v6.x.x版本的基本示例：

1. 首先，确保你已经安装了react-navigation库及其依赖项：

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

2. 接下来，设置你的导航结构。创建一个名为App.js的文件，并添加以下代码：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from './screens/HomeScreen';
import { DetailsScreen } from './screens/DetailsScreen';
 
const Stack = createStackNavigator();
 
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{ title: '主页' }} 
        />
        <Stack.Screen 
          name="Details" 
          component={DetailsScreen} 
          options={{ title: '详情页' }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default App;

3. 创建HomeScreen.js和DetailsScreen.js文件以展示不同的屏幕：

HomeScreen.js:

import React from 'react';
import { View, Text, Button } from 'react-native';
 
const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>主页</Text>
      <Button 
        title="去详情页"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};
 
export default HomeScreen;

DetailsScreen.js:

import React from 'react';
import { View, Text } from 'react-native';
 
const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>详情页</Text>
    </View>
  );
};
 
export default DetailsScreen;

4. 最后，确保在你的入口文件（如index.js）中引入App组件：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
 
AppRegistry.registerComponent(appName, () => App);

这样就设置了一个基本的导航结构，你可以根据需要添加更多的屏幕和导航逻辑。