我无法通过 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 onPress dosn't call function and the touchableopacity docs here https://facebook.github.io/react-native/docs/touchableopacity 之类的帖子，但我不确定为什么会这样 "undefined" 我也曾尝试只调用 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

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

添加到我的componentDidMount()：

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

然后将导航更改为：

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

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

I can't call a function via TouchableOpacity's onPress()

react-native

touchableopacity