React Nativeのビュー間で小道具を渡す

Question

React-Nativeアプリでビュー間に小道具を渡すだけです。つまり、テキスト入力からデータを収集し、それを文字列の次のビューに渡そうとしています。これは私が持っているものです。

最初のビュー：

constructor(props) { 
    super(props); 
    this.state = {name: "", email: "" }; 
    } 

    _pressRow(){ 
    let name=this.state.name; 
    let email=this.state.email; 

    this.props.navigator.push({ 
    ident: "ImportContactScreen", 
    sceneConfig: Navigator.SceneConfigs.FloatFromRight, 
    passProps: { name: name} 
    }); 
    } 

<TextInput 
      style={styles.input} 
      ref= "name" 
      onChangeText={(name) => this.setState({name})} 
      value={this.state.name} 
      /> 

<F8Button 
      style={styles.button} 
      onPress={() => this._pressRow()} 
      caption="Continue" 
      /> 

2番目のビュー：

props = {name} 

<Text style={styles.h1}>Hi, {this.props.name}. Let`'`s import your contacts:</Text> 

私はのようなルックスを使用していナビゲーター：私はこれを実行すると

class MyAppNavigator extends React.Component{ 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Navigator 
     ref="appNavigator" 
     initialRoute={this.props.initialRoute} 
     renderScene={this._renderScene} 
     configureScene={(route) => ({ 
      ...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight 
     })} 
     /> 
    ); 
    } 

    _renderScene(route, navigator) { 
    var globalNavigatorProps = { navigator } 

    switch (route.ident) { 
     case "LoginScreen": 
     return <LoginScreen {...globalNavigatorProps} /> 
     case "UserFlowScreen": 
     return <UserFlowScreen {...globalNavigatorProps} /> 
     case "ImportContactScreen": 
     return <ImportContactScreen {...globalNavigatorProps} /> 
     default: 
     return <LoginScreen {...globalNavigatorProps} /> 
    } 
    } 

}; 

module.exports = MyAppNavigator; 

、this.props.nameが空白になる

Answer 1

passPropsは、routeのプロパティです。あなたのswitch文の各リターンに{...route.passProps}を追加してみてください：あなたのナビゲータ画面のアドオンで

return <LoginScreen {...globalNavigatorProps} {...route.passProps} />