我无法通过 TouchableOpacity 的 onPress() 调用函数

Question

我有点不知道为什么我一直得到TypeError: Chat.onCameraClick is not a function. (In 'Chat.onCameraClick()', 'Chat.onCameraClick' is undefined)。

我有以下内容：

export default class Chat extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Chat',
headerTintColor: colors.HEADERTINT,
headerStyle: {
backgroundColor: colors.HEADER,
},
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
<Icon
name="menu"
size={24}
style={{ color: colors.BLACK, marginLeft: 10 }}
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity onPress={() => this.onCameraClick()}>
<Icon
name="camera"
type='font-awesome'
size={24}
style={{ color: colors.BLACK, marginRight: 10 }}
/>
</TouchableOpacity>
),
});

再往下，我只有相机的方法：

onCameraClick = () => {
console.log("Pic!");
}

我看了像RN TouchableOpacity on Press dosn'；t在此处调用函数和touchableopacity文档https://facebook.github.io/react-native/docs/touchableopacity但我不确定为什么这会是"未定义的"，我也试过只调用onPress={this.onCameraClick}，但基本上相同。

我在这里错过了什么？

Answer 1

我看到你的代码了，我对它做了一些修改。现在它可以工作了。

headerRight: () => (
<TouchableOpacity onPress={this.onCameraClick}> // <<--- here
<Icon
name="camera"
type='font-awesome'
size={24}
style={{ color: colors.BLACK, marginRight: 10 }}
/>
</TouchableOpacity>
),

在调用函数的地方，只需移除圆括号，然后只生成一个箭头函数。

Answer 2

这不起作用的原因是，我从导航中调用类中的一个函数，该函数单独起作用。为了让它发挥作用，我必须设置参数，然后在上面调用它。

添加到我的componentDidMount():

this.props.navigation.setParams({ onCameraClick: this.onCameraClick });

然后将导航更改为：

<TouchableOpacity onPress={navigation.getParam('onCameraClick')}>