Question

我很反应原生，我正在使用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语法取代了绑定语法（并且一如既往地反对意见:)）。存在差异，例如（引自this）：

箭头功能始终是匿名的，这意味着您无法使用例如，可靠地称呼它们（因为你没有可靠的词汇名称使用）。
箭头功能实际创建这个，超级和参数的词法绑定。只有这一点受到约束通过.bind（..）。
箭头函数不能在新表达式中使用，而bind（..）绑定函数可以。

另外，鉴于这是一个反应原生问题，可能有助于了解这篇有趣的文章：

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

如何处理反应导航标题栏内的按钮按下

2 个答案: