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
これで、ReactNavigationを使っていても、ネイティブ側から、initialPropertiesを受け取ることができる