NativeBase: кнопка не работает, но кнопка ReactNative работает - PullRequest
Новая
       4

NativeBase: кнопка не работает, но кнопка ReactNative работает

0 голосов
/ 12 марта 2020

Испытывает странную проблему в моем проекте React Native для Android.

Используя React-Navigation, у меня есть компонент с кнопкой внутри. Эта кнопка должна перейти на новый экран.

Дело в том, что встроенная кнопка React Native работает как брелок, а кнопка Native Base - нет. Я совершенно сбит с толку, даже больше, потому что я использую эту кнопку Native Base Button и в другом месте. И там все отлично работает.

Что здесь происходит?

Здесь вы видите, что приложение работает со встроенной кнопкой React Native:

enter image description here

Наоборот, используя кнопку Native Base, он не только не работает, но даже стили не применяются.

enter image description here

Вот код с кнопкой React Native: 

import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";

type Props = { navigation: any };

const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <Button
        title="Hi i am a button"
        onPress={() => navigation.navigate("Details")}
      ></Button>
    </View>
  );
};

export default withNavigation(ButtonTestScreen);

И код с кнопкой Native Base: 

import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import ButtonNavigate from "../../components/atoms/ButtonNavigate/ButtonNavigate";

type Props = { navigation: any };

const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <ButtonNavigate
        title="Hi i am a button"
        navigateTo="Details"
      ></ButtonNavigate>
    </View>
  );
};

const styles = StyleSheet.create({
  button_style: {
    backgroundColor: "red"
  },
  text_style: {
    color: "#000",
    fontSize: 30
  }
});

export default withNavigation(ButtonTestScreen);

и соответствующий ButtonNavigate сам компонент : 

import React from "react";
import { StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import { Button, Text } from "native-base";

type Props = {
  title: string,
  navigateTo: string,
  navigation: any
};

const ButtonNavigate: React.FC<Props> = ({ title, navigateTo, navigation }) => {
  return (
    <Button
      rounded
      transparent
      style={styles.button_style}
      onPress={() => navigation.navigate(navigateTo)}
    >
      <Text style={styles.text_style}>{title}</Text>
    </Button>
  );
};

const styles = StyleSheet.create({
  button_style: {
    backgroundColor: "red"
  },
  text_style: {
    color: "#151414"
  }
});

export default withNavigation(ButtonNavigate);

Ответы [ 2 ]

1 голос
/ 12 марта 2020

Ребята, причина такого странного поведения - свойство округления кнопки Native Base. В моем приложении почему-то кнопка становится недоступной для нажатия.

Возможно, участники Native Base знают, что делать с этой проблемой, поэтому, если вы прочитаете это, возможно, у вас есть идея.

Решением для моего сейчас было просто убрать «округлено».

Собственная база: 2.13.8 React-Navigation: 4.0.10

1 голос
/ 12 марта 2020

Я только что проверил ваш код в expo.snack, но без навигации и все в порядке,

смотрите здесь

Вы можете протестировать в своем приложении, чтобы удалить навигацию и go шаг за шагом, пока не найдете ошибку.

...