리액트 네이티브에서 화면이동하기

안드로이드에서는 intent 를 이용해서 쉽게 화면간 이동을 할 수 있었다.

 

React-native 에서는 아쉽게도 intent 는 없는데 이를 쉽게 할 수 있게 만들어준 라이브러리가 있다.

바로 Navigator 라는 것인데 나는 많은 Navigator중에서도stackNavigator를

사용해봤다.

 

안드로이드의 intent도 Activity 가 stack 형식으로 쌓이는데 이 동작과 매우 유사해서 사용해봤다.

 

사실 정확한 사용방법이 아닐수도 있다. 정답이 아닌 기록을 위해 적는것이니 참고만 하면 좋을 것 같다.

 

먼저 App.js 에서

const  Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="메인">
        <Stack.Screen name="메인" component={HomeScreen}  />
        <Stack.Screen name="로그인" component={LoginScreen}  />
        <Stack.Screen name="회원가입" component={JoinScreen} />
        <Stack.Screen name="메인2" component={MainScreen2}  options={{headerShown: false}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

이렇게 Stack 으로 사용될 요소들을 미리 적어놓는다.

function HomeScreen({ navigation }) {
  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>

      <View style = {styles.container}>
          <Image  style={{width : 170 , height : 170}} source = {require("./assets/monglogo2.png")} />
      </View>
      <View  style = {styles.bottomcontainer}>
      <CustomButton
            buttonColor={'#023e71'}
            title={'로그인'}
            onPress={() => navigation.navigate('로그인')}/>
      <CustomButton
            buttonColor={'#023e71'}
            title={'회원가입'}
            onPress={() => navigation.navigate('회원가입')}/>
       
    </View>
    </View>
  );
}

그리고 onPress={() => navigation.navigate('로그인')}/> 이런식으로 버튼을 눌렀을때

Stack.Screen name = "로그인" 으로 적어준 name을 적어주면 그 화면으로 이동하게 된다.