Question

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

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

事实是，React Native的内置按钮就像一个超级按钮一样工作，而Native Base的按钮却没有。我完全感到困惑，甚至更多，因为我也在另一个位置使用了“本机基本按钮”。在那里工作正常。

这是怎么回事？

在这里，您会看到该应用程序与内置的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按钮的“四舍五入”属性。在我的应用程序中，它某种程度上导致按钮变得不可单击。

也许Native Base的贡献者知道如何解决这个问题，所以如果您阅读此书，也许您有一个想法。

我现在的解决方案就是删除“四舍五入”。

本国基数：2.13.8 反应导航：4.0.10

Answer 3

就我而言，它是按钮的container属性中的“顶部”导致此问题。删除它并在其上方的容器中添加“ marginBottom”即可解决问题

NativeBase：按钮不起作用，但是ReactNative的按钮起作用

3 个答案: