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

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

您可以在您的应用中进行测试以删除导航，并逐步进行操作，直到找到错误为止。