NavBar应如何与React Native中的Component通信？

Question

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

我有以下代码。

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

我不明白两者如何沟通

Answer 1

这里有几个选项

• 让performSave静态
• 将performSave移至另一个类，一个可以共享且不是反应组件的类
• 如果使用助焊剂库，请在助焊剂库中使用此类操作的最佳做​​法。例如，在redux中，您可以将该代码包含在动作创建者中。