使用反应原生路由器通量在表示组件中识别右上角的按钮单击

Question

我的应用场景使用了一个容器组件，它调用了一个展示组件。

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

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

现在我正在尝试让展示组件识别右上角的单击按钮（以便它可以保存数据）。

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

但我发现无法让容器组件中的static right 函数听到在演示组件中的点击（然后采取适当的操作）。

我尝试了 these two solutions 和其他几个（包括 Action.refresh），但没有任何效果。我想过使用状态，但如果我使用静态函数，我无法访问state 或this.。但是删除static 会使按钮完全消失。

提前感谢您的帮助。

Answer 1

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

• 容器组件

有一个处理业务逻辑的updateAccount 函数。这将作为prop 传递到演示组件。

• 演示组件

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

---

handleChange

• 在文本输入更改时，触发此函数，并且输入中的数据在状态下更新

• 当它被调用时，我们知道表单已经改变，所以我们想在 (react-native-router-flux) 导航栏中显示一个“保存”按钮（点击它应该会触发我们容器的 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);
  };