无法打印console.log in button react-native答案

【问题标题】：unable to print console.log in button react-native无法打印console.log in button react-native
【发布时间】：2020-06-25 07:34:44
【问题描述】：

我创建了一个自定义按钮组件以实现可重用性，这是我的按钮代码

export default function AppButton({ title, color = "", marginVertical = 0 }) {
  return (
    <TouchableHighlight
      style={[
        styles.button,
        { backgroundColor: colors[color], marginVertical: marginVertical }]}
    >
    <Text style={styles.text}>{title}</Text>
    </TouchableHighlight>
  );
}

这是我要在其中打印控制台 .log 的按钮

<AppButton
       title="login"
       onPress={() => console.log("email and password recieved")}
/>

【问题讨论】：

你为什么把 onPress 写成 'onPres[![enter image description here][1]][1]s' 这个？另一件事是我认为您没有在 AppButton 组件上收到此道具

标签： react-native ecmascript-6

【解决方案1】：

试试这个，你需要将 onpress 函数作为 props 传递给可触摸的高亮。

export default function AppButton({ title, color = "", marginVertical = 0 }) {
  return (
    <TouchableHighlight
      onPress={onClick}
      style={[
        styles.button,
        { backgroundColor: colors[color], marginVertical: marginVertical },
      ]}
    >
      <Text style={styles.text}>{title}</Text>
    </TouchableHighlight>
  );
}

 <AppButton
        title="login"
        onClick={() => console.log("email and password recieved")}
      />

更多细节可以在文档中找到：https://reactnative.dev/docs/touchablehighlight

【讨论】：

感谢 Roy Chan 在我传入 touchable 和参数时它的工作