資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
廣告