如何在 React Native 中处理从一个页面到另一个页面的导航?
在应用程序上工作时,我们希望从一个屏幕切换到另一个屏幕,这由 React Navigation 处理。
要进行页面导航,我们需要安装以下几个软件包 −
npm install @react-navigation/native @react-navigation/stack npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler
完成上述安装后,让我们继续在 React Native 中进行下一个导航设置。
在您的应用程序项目中创建一个名为 pages/ 的文件夹。创建 2 个 js 文件 HomePage.js 和 AboutPage.js。
pages/HomePage.js
import * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const HomeScreen = ({ navigation }) => { return ( <Button title="Click Here" onPress={() => navigation.navigate('About', { name: 'About Page' })}/> ); }; export default HomeScreen;
在主页中,我们想要显示一个标题为"单击此处"的按钮。单击该按钮后,用户将导航到 AboutPage 屏幕。
AboutPage 的详细信息如下 −
pages/AboutPage.js
import * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const AboutPage = () => { return <Text>You have reached inside About Page!</Text>; }; export default AboutPage;
在关于页面中,我们仅显示如上所示的文本。
现在让我们在 App.js 中调用页面,如下所示 −
页面调用如下 −
import HomePage from './pages/HomePage'; import AboutPage from './pages/AboutPage';
此外,我们需要从 @react-navigation/native 导入 NavigationContainer,它将充当导航容器。从 @react-navigation/stack 添加 createStackNavigator。
调用 createStackNavigator(),如下所示 −
const Stack = createStackNavigator();
现在,您可以使用 <Stack.Navigator> 作为父容器将页面添加到此 Stack。Stack.Navigation 可帮助您的应用在屏幕之间转换,每个新屏幕都放置在堆栈顶部。
<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} /><Stack.Screen name="About" component={AboutPage} /> </Stack.Navigator></NavigationContainer>
要为 HomePage 屏幕创建 Stack,请按如下方式操作 −
<Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />
要为 AboutPage 屏幕创建 Stack,请按如下方式操作 −
<Stack.Screen name="About" component={AboutPage} />
以下是有助于 React Native 中导航屏幕的完整代码 −
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomePage from './pages/HomePage'; import AboutPage from './pages/AboutPage'; const Stack = createStackNavigator(); const MyStack = () => { return ( <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} /><Stack.Screen name="About" component={AboutPage} /> </Stack.Navigator></NavigationContainer> ); }; export default MyStack;