使用 React Native Router Flux 在演示组件中识别右上角按钮单击

Question

我的应用程序场景使用调用展示组件的容器组件。

我可以像这样在容器组件中创建右上角的按钮：

static right = () => {
  return (
    <TouchableOpacity onPress={() => buttonPressed()}>
      <Text style={styles.rightButtonText}>Done</Text>
    </TouchableOpacity>
  );
};

现在我正在尝试让演示组件识别右上角的按钮点击（这样它就可以保存数据）。

我可以通过将函数作为 prop 从容器组件发送到展示组件来在两者之间进行通信。当从展示组件调用它时，它会在容器组件中调用。

但我没有找到让容器组件中的 static right 功能听到展示组件中的点击（然后采取适当的操作）的方法。

我尝试和其他几个（包括 Action.refresh）但 none 工作。我想过使用状态，但如果我使用的是静态函数，则无法访问 state 或 this.。但是删除 static 会使按钮完全消失。

在此先感谢您的帮助。

Answer 1

我过去也遇到过类似的挑战。我处理的方式如下（直接从代码库中获取（mostly））。请注意，它们是与您提供的示例类似的方法，但也许这对您有意义。

• 容器组件

具有处理业务逻辑的 updateAccount 函数。这作为 prop.

传递到 演示组件

• 演示组件

突出显示组件中的 2 个特定功能：

handleChange

在文本输入发生变化时，将触发此函数并更新来自输入的数据状态
调用时，我们知道表单已经改变，所以我们想在 (react-native-router-flux) 导航栏中显示一个 'save' 按钮（在点击，应该触发我们容器的 updateAccount)。所以我们调用 toggleSaveButton:
```
handleChange = (name, val) => {
    this.setState({ [name]: val, formChanged: true }, this.toggleSaveButton);
}
```

toggleSaveButton

如果this.state.formChanged为真，则表单已更改，因此添加保存按钮供用户点击，否则将其隐藏（例如，我可能会在表单提交成功时隐藏）

toggleSaveButton = () => {
  const config = this.state.formChanged
    ? { rightTitle: 'Save', onRight: () => this.props.updateAccount(this.state) }
    : { rightTitle: '', onRight: () => {} };

  Actions.refresh(config);
};

使用 React Native Router Flux 在演示组件中识别右上角按钮单击

Have top right button click be recognized in presentational component using react native router flux

react-native

react-native-router-flux