数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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;在 About 页面中，我们只是显示如上所示的文本。
现在让我们在 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;
更新于：2021-07-01
4K+ 阅读量
广告