演習⑤　React Nativeで、画面遷移をする

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

function HomeScreen({navigation}) {
  return(
    <View>
      <Text>Home</Text>
      <Button
        title="Sub画面へ"
        onPress={() => navigation.navigate("Sub")}
      />
    </View>
  )
}

function SubScreen() {
  return(
    <View>
      <Text>Sub</Text>
    </View>
  )
}

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

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
 
画面遷移するときに値を渡したい時があります。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';


function HomeScreen({navigation}){
  return(
    <View>
      <Button title='PUSH'
              onPress={() => navigation.navigate('DETAIL',{id:1})}
      />
    </View>
  )
}

function DetailScreen(props){
  const {route} = props;
  const {id} = route.params;
  return(
   <View>
    <Text>Detail</Text>
    <Text>ID is {id}</Text>
   </View>
  )
}



export default function App() {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='HOME' component={HomeScreen}/>
        <Stack.Screen name='DETAIL' component={DetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
 
propsを表記しない別の方法を好む方は下記のような記載もあります。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';


function HomeScreen({navigation}){
  return(
    <View>
      <Button title='PUSH'
              onPress={() => navigation.navigate('DETAIL',{id:1})}
      />
    </View>
  )
}

function DetailScreen({route}){
  const {id} = route.params;
  return(
   <View>
    <Text>Detail</Text>
    <Text>ID is {id}</Text>
   </View>
  )
}



export default function App() {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='HOME' component={HomeScreen}/>
        <Stack.Screen name='DETAIL' component={DetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>

  );
}

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