[RN] React Navigation Docs(2) - params

React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator

Passing the parameters to routes

몇몇 routes 들과 navigate 를 갖는 stack navigator 를 생성하고 navigate 할 때, routes 들에게 데이터를 전달하는 과정에는 다음 2가지 단계가 있습니다.

1. navigation.navigate 메소드의 2번째 인자에 parameter 를 객체로 전달합니다: this.props.navigation.navigate('RouteName', { /* params go here */ })

2. 전달받은 parameter를 읽을 때는, this.props.navigation.getParam(paramName, defaultValue) 메소드를 호출하여 읽을 수 있습니다. 여기서, defaultValue를 지정해 놓으면, 전달받은 parameter 가 없을 때 defaultValue가 반환됩니다.

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}
 
class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');
 
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Using params in the title

navigationOptions 를 정의해서 header의 옵션을 변경할 수 있으며, getParam() 메소드의 2번째 인자로 전달한 params를 getParam() 메소드로 읽어들여 header의 title 속성을 변경할 수도 있습니다.

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
 
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}
 
class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };
 
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');
 
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Updating navigationOptions with setParams

마운트된 스크린 컴포넌트에서 좀 더 액티브 한 스크린을 구성하기 위하여, this.props.navigation.setParams() 메소드를 사용하여 navigationOptions 를 update 할 수 있습니다.

<Button
    title="Update the title"
    onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
/>

추가적으로, React Navigation 은 screen component 가 header 이전에 mount 되는 것을 보장하지 않습니다. 이로 인해 문제가 발생할 수 있는데, 그 대안으로 setParams 대신 Redux 또는 MobX와 같은 상태 관리 라이브러리를 사용하여 header 와 screen 간에 통신할 수 있습니다.

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator