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"
          />

第二种观点：

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} />

在React Native中的视图之间传递道具

1 个答案: