RN使用Router路由设计一个导航页，在同一个页面渲染不同的页面

在React Native中，可以使用React Navigation库来实现路由导航。下面是一个简单的例子，演示如何在同一个页面中渲染不同的页面：

首先，在终端中运行以下命令来安装React Navigation库：

npm install @react-navigation/native

接下来，安装Stack Navigator：

npm install @react-navigation/stack

然后，在App.js中添加以下代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在上面的代码中，我们创建了一个名为`Stack`的StackNavigator对象，并将其包装在`NavigationContainer`中。在`Stack.Navigator`中，我们定义了两个屏幕：`Home`和`Settings`，分别与`HomeScreen`和`SettingsScreen`组件相关联。

接下来，我们需要创建两个组件`HomeScreen`和`SettingsScreen`，并在这些组件中添加一些内容。例如，在`HomeScreen`中，我们可以添加一个按钮，点击该按钮会导航到`SettingsScreen`：

import React from 'react';
import { View, Text, Button } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

在上面的代码中，我们使用`navigation.navigate('Settings')`来导航到`SettingsScreen`。

最后，我们需要创建`SettingsScreen`组件，例如：

import React from 'react';
import { View, Text } from 'react-native';

export default function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

现在，我们已经完成了一个简单的导航应用程序，可以在同一个页面中渲染不同的屏幕。