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

Question

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

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

这与我从反应导航文档中读到的内容很接近，但我不断收到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。它们或多或少是等效的，并且有人认为胖箭头语法取代了绑定语法(并且一如既往，相反的意见:))。有差异，例如(引用自此)：

• 箭头函数始终是匿名的，这意味着你不能，因为 实例，可靠地递归调用它们(因为您没有 要使用的可靠词法名称)。
• 箭头函数实际创建 这个、超级和参数的词法绑定。只有这个是绑定的 通过 .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)}