Блог

Главная - Вопросы по программированию - Навигация не работает на пользовательской кнопке react native

Навигация не работает на пользовательской кнопке react native

#reactjs #react-native

#reactjs #react-native

Вопрос:

надеюсь, кто-нибудь поможет мне с этой проблемой. Я создал свои собственные кнопки, и когда я вызываю их как компонент на экране, навигация по нажатию не работает, только в компоненте кнопки из react native. Это мой код:

Пользовательская кнопка:

 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>
  );
}

Ответ №1:

Вы должны использовать реквизит onPress, который вы передаете, как показано ниже

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

Комментарии:

1. Спасибо за ответ, он работает, но не внутри Formik, потому что я использую библиотеку Formik для проверки. Появляется эта ошибка: createElement: недопустимый тип — ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен. … Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен

2. Эта ошибка обычно появляется, когда вы смешиваете импорт по умолчанию с именованным, можете ли вы это проверить, я не думаю, что formik вносит какие-либо конкретные изменения

Ответ №2:

Попробуйте передать onPress обработчик в TouchableOpacity :

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