Question

希望有人会帮助我解决这个问题。我已经创建了自己的按钮，当我将它们作为屏幕上的组件调用时，onPress导航不起作用，仅在按钮组件中来自本机响应。这是我的代码：

自定义按钮：

export const MediumButton = ({ title }) => {
  return (
    <TouchableOpacity style={styles.mediumButton}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

这是我称为MediumButton的屏幕代码：

import { MediumButton } from "../../components/Button/Button";

export default function Home({ navigation }) {
  return (
    <View style={global.container}>
      <View style={styles.container}>
        <Text style={styles.titleText}>Miresevini ne Hajde App</Text>
        <MediumButton
          title="Kycu"
          onPress={() => navigation.navigate("Register")}
        />
        <MediumButton
          title="Regjistrohu"
          onPress={() => navigation.navigate("Login")}
        />
      </View>
    </View>
  );
}

Answer 1

您必须使用像下面这样传递的onPress道具

export const MediumButton = ({ title,onPress }) => {
  return (
    <TouchableOpacity style={styles.mediumButton} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

Answer 2

尝试将onPress处理程序传递给TouchableOpacity：

export const MediumButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.mediumButton} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

导航不适用于自定义按钮反应本机

2 个答案: