ReactNativationでネイティブからのinitialPropertiesを扱う

　ReactNativeで開発するときのルーターとしては、ReactNavigationを使うことが多いだろう。

　さて、そうすると、AppRegistry.registerComponentされるComponentはReactNavigationのComponentであるため、initialPropertiesでネイティブから受け取った値を、ReactNavigationにStackされているScreenに伝搬する必要がある。

　そこで使えるのが、ReactNavigationのscreenProps。これを使えば、子Screenで、screenPropsから値を取得できる

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>This value is from Native :{this.props.screenProps.fromNative}</Text>
        <Button
          onPress={() => { this.props.navigation.navigate("NextScreen") }}
          title="Go to NextScreen"
          color="#841584"
        />
      </View>
    )
  }
}

class NextScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>This value is also from Native :{this.props.screenProps.fromNative}</Text>
      </View>
    )
  }
}

const RootStack = createStackNavigator(
  {
    HomeScreen: HomeScreen,
    NextScreen: NextScreen,
  },
  {
    initialRouteName: 'HomeScreen',
  }
)

class App extends Component {
  render() {
    return <RootStack screenProps={this.props} />
  }
}

export default App