TIL.RN_Screens이동

New screen으로 이동

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

navigation: navigation prop은 stack navigator에서 모든 screen 컴포넌트로 전달된다.
navigate('Details'): navigation prop의 navigate 함수는 이동하고자하는 곳의 route 이름과 함께 적어준다.

여러번 route로 이동

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

위 Go to Details... again 탭을 누르면 아무일도 일어나지 않는다. 이미 우리는 Details route에 있기 때문이다. navigate의 의미는 이 screen으로 이동하라는 의미다.
navigate대신 push를 사용하면 존재하는 navigation history에 관계없이 또다른 route를 추가해 이동할 수 있게 해준다. (Details route로 여러번 이동가능하게 되는 것임!)

<Button
title="Go to Details... again"
onPress={()=>navigation.push('Details')}
/>

push를 사용할 때마다 navigation stack에 새로운 route를 추가하는 것이다.

Going back

stack navigator에 제공된 header는 자동적으로 back button을 포함한다.
그러나 때로는 이런 것을 직접적으로 코드로 작성할 수도 있는데 navigation.goBack();을 사용하면 된다.

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

만약 가장 첫번째 screen으로 돌아가고 싶다면 navigation.popToTop()을 사용하면 된다!!

Stack과 tab 중첩 사용 예시

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Hello">
      <Stack.Screen name="BottomTab" component={BottomTab}/>
      <Stack.Screen name="매물상세" component={DetailScreen}/>
      <Stack.Screen name="AI집찾기지도" component={AiMapTab}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

위 코드는 stack을 보여준다.

function BottomTab(){
  return (
      <Tab.Navigator initialRouteName="Hello">
      <Tab.Screen name="Home" component={HomeScreen}/>
      <Tab.Screen name="매물장바구니" component={BagScreen}/>
      <Tab.Screen name="2톡" component={AgentTalk}/>
      <Tab.Screen name="1톡" component={MainTalk}/>
      <Tab.Screen name="내정보" component={Information}/>
      </Tab.Navigator>
  );
}

위 코드는 Bottom에 위치하고 있는 BottomTab들..

function HomeScreen({navigation}){
 
  const goToStackScreen=()=>{
    navigation.navigate('매물상세');
  };
  return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Button title="Go to DetailScreen" onPress={goToStackScreen}/>
</View>
  );
}

위 코드를 보면 현재 HomeScreen 컴포넌트는 bottomTab 스택에 위치하고 있다. 하지만 버튼을 하나줘서 다른 스택이동 함수를 설정해주면 매물상세 스택으로 이동한다!

참고:https://reactnavigation.org/docs/navigating