React Nativeで、Navigationを使用しながら、それぞれの画面を別々のコンポーネントにする

ターミナルでプロジェクトに移動して、

npm install @react-navigation/native@6 @react-navigation/stack@6

としました

下記くらいの機能の使用だけだと、React Navigationの場合は、依存関係のライブラりのインストールは不要なようです。（Documentには記載あるが、、、）

一番初めのホーム画面（HomeScreen）については、App.jsで定義しておきました。

（プロジェクト）/App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import RegisterScreen from './src/Screens/RegisterScreen';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({navigation}){
  return(
      <View>
        <View style={styles.button}>
          <Button
             title="検索画面"
          />
        </View>
        <View>
          <Button
             title="登録画面"
             onPress={() => navigation.navigate("RegisterScreen")}
          />
        </View>
      </View>
  )
}

export default function App() {
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen component={HomeScreen} name="HomeScreen"/>　・・・⓵
        <Stack.Screen component={RegisterScreen} name="RegisterScreen"/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

①　一番上の画面が最初に表示されます。

もう一つの画面（RegisterScreen）は、別のコンポーネントとして作成しました。

（プロジェクト）/src / Screens/ RegisterScreen.js

import {View, StyleSheet,Text, Button} from 'react-native';

export default function RegisterScreen({navigation}){
    return(
        <View>
           <Text>RegisterScreen</Text>
           <Button
              title="PUSH"
              onPress={() => navigation.navigate("HomeScreen")}/>      
        </View>
    )
}

{ navigation } を、RegisterScreenの引数に入れておくだけでよいです。

これは、goBack( )を使って下記のようにも書けます。

import {View, StyleSheet,Text, Button} from 'react-native';

export default function RegisterScreen({navigation}){
    return(
        <View>
           <Text>RegisterScreen</Text>
           <Button
              title="PUSH"
              onPress={() => navigation.goBack()}/>      
        </View>
    )
}

また、propsを明記すると下記のようになります。

import {View, StyleSheet,Text, Button} from 'react-native';

export default function RegisterScreen(props){
    const {navigation} = props;
    return(
        <View>
           <Text>RegisterScreen</Text>
           <Button
              title="PUSH"
              onPress={() => navigation.goBack()}/>      
        </View>
    )
}

ホーム画面の中の、『登録画面』というボタンを押すと、次の画面に移行する。

一番左上の→を押してもホーム画面に戻るし、PUSHボタンを押してもホーム画面に変えるようにしてます。