反応ネイティブで1つのページから別のページへのナビゲーションを処理する方法は？

アプリで作業しているときに、ある画面から別の画面に切り替えたいのですが、それはリアクションナビゲーションによって処理されます。

ページのナビゲートを行うには、次のようにいくつかのパッケージをインストールする必要があります-

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

上記のインストールが完了したら、reactnativeでのナビゲーションの次のセットアップに進みましょう。

アプリプロジェクトで、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('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からNavigationContainerをインポートする必要があります-navigation/nativeはナビゲーションコンテナとして機能します。 @ react-navigation/stackからcreateStackNavigatorを追加します。

以下に示すように、createStackNavigator（）を呼び出します-

const Stack = createStackNavigator();

これで、親コンテナとしてを使用して、このスタックにページを追加できます。 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>

Stack for HomePage画面を作成するには、次のようにします-

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

AboutPage画面のスタックを作成するには、次のようにします-

<Stack.Screen name="About" component={AboutPage} />

これがReactNativeのナビゲーション画面に役立つ完全なコードです-

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;