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

Question

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

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

标签： react-nativeecmascript-6

Answer 1

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

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