NavBar 应该如何与 React Native 中的组件通信？答案

【问题标题】：How should a NavBar communicate with a Component in React Native?NavBar 应该如何与 React Native 中的组件通信？
【发布时间】：2017-04-06 09:05:26
【问题描述】：

我在我的 React Native 应用程序中使用“react-native-router-flux”，但我似乎无法弄清楚我的自定义导航栏应该如何与我的组件通信？

我有以下代码。

NavigationRouter.js：

<Scene key='addDrillScreen' component={AddDrillScreen} navBar={AddDrillNavBar} />

AddDrillScreen.js：

class AddDrillScreen extends React.Component {
  performSave() {
    // Want to call performSave() when NavBar is clicked
  }

}

AddDrillNavBar.js：

class AddDrillNavBar extends React.Component {    
  render() {
    return (
        <View style={styles.saveButton}>
        <TouchableOpacity onPress={() => {
          // ??? How do I trigger the performSave() on my AddDrillScreen?
        }}>
          <Text style={styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
      </View>
    )
  }

我不明白两者是如何沟通的

【问题讨论】：

这里有一个类似的问题。希望这可以解决您的问题。 stackoverflow.com/questions/32846655/…

标签： reactjs react-native react-native-router-flux

【解决方案1】：

这里有几个选项

将performSave设为静态
将 performSave 移至其他类，该类可以共享且不是反应组件
如果您使用助焊剂库，请在助焊剂库中使用此类操作的最佳实践。例如，在 redux 中，您应该将该代码包含在动作创建器中。

【讨论】：