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 'react';
import { Button, View, Alert, Text } from 'react-native';
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 '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.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 './pages/HomePage';
import AboutPage from './pages/AboutPage';
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 サイトの他の関連記事を参照してください。