React Native であるページから別のページへのナビゲーションを処理するにはどうすればよいですか?-jsチュートリアル-php.cn

React Native であるページから別のページへのナビゲーションを処理するにはどうすればよいですか?

PHPz

リリース： 2023-09-05 23:37:07

転載

808 人が閲覧しました

如何在 React Native 中处理从一个页面到另一页面的导航？

アプリケーションの開発中に、ある画面から別の画面に切り替える必要がありますが、これは反応ナビゲーションを通じて処理されます。

ナビゲーションページで作業するには、以下に示すようにいくつかのパッケージをインストールする必要があります - p>

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/ という名前のフォルダーを作成します。 HomePage.js と AboutPage.js の 2 つの js ファイルを作成します。

pages/HomePage.js

import * as React from &#39;react&#39;;
import { Button, View, Alert, Text } from &#39;react-native&#39;;
const HomeScreen = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

ログイン後にコピー

ホームページに、「ここをクリック」というタイトルのボタンを表示します。このボタンをクリックすると、ユーザーは AboutPage 画面に移動します。

AboutPage の詳細は次のとおりです -

pages/AboutPage.js

import * as React from &#39;react&#39;;
import { Button, View, Alert, Text } from &#39;react-native&#39;;
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

ログイン後にコピー

About ページでは、上記のようにテキストを表示するだけです。

次に、App.js で次のようにページを呼び出しましょう -

ページは次のように呼び出されます -

import HomePage from &#39;./pages/HomePage&#39;;
import AboutPage from &#39;./pages/AboutPage&#39;;

ログイン後にコピー

さらに、@react からページを呼び出す必要があります。 -navigation/native NavigationContainer をインポートすると、ナビゲーションコンテナーとして機能します。 @react-navigation/stack から createStackNavigator を追加します。

以下に示すように、createStackNavigator() を呼び出します。 -

const Stack = createStackNavigator();

ログイン後にコピー

これで、を親コンテナとして使用して、このスタックにページを追加できます。 Stack.Navigation は、新しい画面がスタックの最上部に配置されることで、アプリが画面間を移行するのに役立ちます。

<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator></NavigationContainer>

ログイン後にコピー

ホーム画面のスタックを作成するには、次のように入力してください-

<Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} />

ログイン後にコピー

AboutPage 画面のスタックを作成するには、次のように入力してください-

<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 &#39;./pages/HomePage&#39;;
import AboutPage from &#39;./pages/AboutPage&#39;;
const Stack = createStackNavigator();
const MyStack = () => {
   return (
      <Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
      
   );
};
export default MyStack;

ログイン後にコピー

以上がReact Native であるページから別のページへのナビゲーションを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。