NativeBase: Button 不起作用，但 ReactNative 的 Button 起作用

Question

在 Android 的 React Native 项目中遇到一个奇怪的问题。

使用 React-Navigation，我有一个内部带有按钮的组件。此按钮应导航到新屏幕。

事实是，React Native 的内置按钮非常有用，而 Native Base 的按钮则不然。我完全糊涂了，甚至更糊涂了，因为我也在另一个位置使用了这个 Native Base Button。那里工作正常。

这是怎么回事？

在这里，您会看到应用程序与内置的 React Native 按钮一起工作：

反之，使用Native Base的按钮，不但不起作用，连样式都应用不上

这是带有 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);

Answer 1

我刚刚测试了你在 expo.snack 中的代码，但没有导航，但没问题，

see it here

您可以在您的应用中测试以移除导航并逐步执行，直到找到错误。

Answer 2

伙计们，造成这种奇怪行为的原因是 Native Base 按钮的 "rounded" 属性。在我的应用程序中，它以某种方式导致按钮变得不可点击。

也许 Native Base 的贡献者知道如何解决这个问题，所以如果你读到这篇文章，也许你会有想法。

我现在的解决方案是简单地删除 "rounded"。

本机基础：2.13.8 反应导航：4.0.10

Answer 3

在我的例子中，它是导致此问题的按钮容器属性中的“顶部”。删除它并在其上方的容器中添加“marginBottom”解决了问题

NativeBase: Button 不起作用，但 ReactNative 的 Button 起作用

NativeBase: Button does not work, but ReactNative's Button does

react-native

native-base