native navigation으로 화면전환시키기! (2022.04.03 수정)

미세먼지 어플리케이션 10강 - 네비게이션 (9강은 10강 후에 진행하겠습니다. 순서 조정했습니다.) - YouTube

영상은 이것을 참고했습니다..

이것을 20번정도 돌려보고나니까 되더군여....

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

 import React from 'react';
 //import 'react-native-gesture-handler';
 import {StyleSheet,Text,View,Button} from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 const Stack = createNativeStackNavigator();
 
 function HomeScreen({navigation}){
   return(
     <View style = {{flex : 1, alignItems : 'center', justifyContent : 'center',}}>
       <Text>Home Screen입니다.</Text>
       <Button title="버튼" onPress={()=> navigation.navigate('Profile')}/>
     </View>
   );
 }
 
 function ProfileScreen(){
   return(
     <View style = {{flex : 1, alignItems : 'center', justifyContent : 'center',}}>
       <Text>ProfileScreen입니다.</Text>
     </View>
   );
 }
 
 const App: () => Node = () => {
   return (
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Welcome' }}/>
         <Stack.Screen name="Profile" component={ProfileScreen}/>
       </Stack.Navigator>
     </NavigationContainer>
   );
 };
 
 const styles = StyleSheet.create({
 });
 
 export default App;

고친 코드는 App.js밖에 없습니돠.

 

react-native-gesture-handler 을 사용하려면 npm을 다시 설치하는게 필수인거 같더군요??

암턴 요롷게 하면

홈 화면에서 버튼을 누르면??     ------------------------------------>

요로코롬 프로필 화면으로 넘어갑니뎅.

네 그렇습니다.

이제 이거를 발전을 시켜봐야겠지효.

Navigating Between Screens · React Native

Navigating Between Screens · React Native

여기서 install하라고 시키는거 다 설치하는것은 동영상에도 나와있지만 참고하시길 바라것습니다..