RN - Passing parameters to routes

stacknavigator 로 정의한  screen 끼리

data를 넘겨줄 때 사용하는 방법입니다.

 

가이드는 아래 잘 나와있습니다.

다만, function component 기준으로만 나와있어서 

여기서는 class component 도 함께 적었습니다.

reactnavigation.org/docs/params/

Passing parameters to routes | React Navigation

 

우선 stacknavigator 로 settingScreen 과  regionScreen 을 구성합니다.

const Stack = createStackNavigator();

export default class MainScreen extends Component {
  state = {
    finishIntro: 0,
  }
  async componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000);
  }
  onRenderItem = ({ item }) => {
    return (
      <View style={globalStyles.IntroSlideContainer}>
        <Image style={globalStyles.IntroSlideImageContainer} source={item.image} />
      </View>
    );
  }
  onDone = () => {
    this.setState({finishIntro:1});
    setAsyncStorage("finishIntro", "1");
  }

  render() {
    if (this.state.finishIntro > 0) {
      return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Auth" component={AuthScreen} 
                options={() => ({
                  headerShown:false,
                  headerTitle:"로그인",
                })}
                />
                <Stack.Screen name="Home" component={BottomTabScreen}
                options={() => ({
                  // headerLeft:() => <Header left={true} navigation={navigation}/>,
                  // headerRight:() => <Header left={false} navigation={navigation}/>,
                  headerShown:false,
                  headerTitle:"지도보기",
                  gestureEnabled: false,
                })}
                />
                <Stack.Screen name="LocationSetting" component={RegionScreen}
                options={() => ({
                  headerTitleAlign:"center",
                  headerTitle:"지역 설정",
                })}
                />
                <Stack.Screen name="Setting" component={SettingScreen}
                options={() => ({
                  headerTitleAlign:"center",
                  headerTitle:"설정",
                })}
                />
                <Stack.Screen name="AppManual" component={ManualScreen}
                options={() => ({
                  headerTitleAlign:"center",
                  headerTitle:"공지사항",
                })}
                />
                <Stack.Screen name="Chat" component={ChatScreen}
                options={() => ({
                  headerTitleAlign:"center",
                  headerTitle:"우리동네 대화공간",
                })}
                />
            </Stack.Navigator>
        </NavigationContainer>
      );
    } else {
      return <AppIntroSlider renderItem={this.onRenderItem} data={introSlide} onDone={this.onDone}/>;
    }
  }
}

 

SettingScreen -> RegionScreen call

fromAuth 변수명으로 boolean 값을 넘겨줌.

class component 라면 당연히,

this.props.navigation.navigate("LocationSetting", {fromAuth:false}); 로 변경.

export default function SettingScreen({navigation}) {
  const onRegionSetting = () => {
    navigation.navigate("LocationSetting", {fromAuth:false});
  }
  return (
  );
}

2개 이상 params 전달 도 문제없고

data type 도 number, string, boolean 등 마음대로 설정 가능합니다.

navigation.navigate('Details', {
  itemId: 86,
  otherParam: 'anything you want here',
});

 

RegionScreen.js

- this.props.route.params.fromAuth 로 params 값을 얻어올 수 있습니다.

export default class RegionScreen extends Component {
  state = {
    firstPicker: "서울특별시",
    secondPicker: "마포구",
  };
  onPress = () => {
    if (this.props.route.params.fromAuth) {
      this.props.navigation.navigate("Auth");
    } else {
      this.props.navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{name: "Home"},],
        })
      );
    }
  }
  componentDidMount() {

  }

  render() {
    return (
    }
  }
}