如何处理 react-navigation 标题栏内的按钮按下

Question

我是 react-native 的新手，我目前正在使用 react-navigation 为我的应用程序处理导航。我希望能够在 react-navigation 创建的我的应用程序标题栏中添加一个按钮，并且能够按下一个按钮来调用一个函数。

static navigationOptions = ({ navigation }) => {
    const { params } = navigation;
    return {
      title: 'Assign To',
      headerRight: (
        <Button
          title='Back'
          onPress={() => params.handlePress()}
        />
      ),
    };
 };

这与我从 react-navigation docs 中读到的内容很接近，但我一直收到 undefined is not an object.

的错误

componentDidMount() {
    this.props.navigation.setParams({ handlePress: () =>   this.myFunction.bind(this) });
}

我在我的组件中定义了 myFunction，如下所示

myFuntion() {
    //...
}

非常感谢任何帮助

Answer 1

我将回答这个问题，并提供更多解释。如您所知，问题在于您将两种相似方法的语法组合在一起。您可以使用 .bind 语法：handlePress: this.myFunction.bind(this) 或所谓的粗箭头语法：handlePress: () => this.myFunction。它们或多或少是等价的，并且有人认为 fat-arrow 语法取代了 bind 语法（而且，一如既往，相反的意见:)）。有区别，比如（引用自this）：

箭头函数总是匿名的，这意味着你不能，因为例如，可靠地递归调用它们（因为你没有使用可靠的词法名称）。
箭头函数实际创建 this、super 和 arguments 的词法绑定。只有这个绑定通过 .bind(..)。
新表达式中不能使用箭头函数，而 bind(..) 绑定函数可以。

另外，考虑到这是一个 React Native 问题，了解这篇有趣的文章可能会有所帮助：

https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

Answer 2

对于大多数元素，您可以在 react-native 中使用 onPress() 函数

onPress={() => { Alert.alert("You clicked me") } }

如果您需要绑定，通常可以使用以下示例进行绑定：

onPress={this.functionName.bind(this)}

如何处理 react-navigation 标题栏内的按钮按下

How to handle a button press inside react-navigation titlebar

react-native

react-navigation