React Native使用@react-navigation/native配置页面路由

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

这段代码展示了如何使用React Navigation库中的createStackNavigator来配置一个简单的页面路由。首先，我们导入了必要的React和React Navigation的组件。然后，我们定义了一个名为App的函数组件，在其中我们创建了一个NavigationContainer来容纳整个应用的导航状态，并定义了一个栈导航器Stack.Navigator，其中包含了两个屏幕：HomeScreen和DetailsScreen。我们还展示了如何根据路由参数动态设置屏幕标题。这是一个典型的React Native应用使用React Navigation的起点。