react-native - 可触摸的不透明度会扰乱行容器中的宽度

Question

我试图使这两个卡片组件彼此相邻地出现在一行中，如图所示 here当我将组件包装在 View 中时，这似乎有效，但看起来像 this当我尝试使用 TouchableOpacity 时，中间有一堆不必要的空间。

这是我的 Card 组件代码(当前启用了 TouchableOpacity 并注释掉了 View 包装器):

  export const NavCard = ({
  title,
  height = 200,
  onPress = null,
  background = null,
}) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        { height: height },
        background ? styles.cardImage : styles.noImage,
      ]}
    >
      {/* <View
        style={[
          { height: height },
          background ? styles.cardImage : styles.noImage,
        ]}
      > */}
      <Image
        source={background}
        resizeMode="cover"
        style={{
          height: height,
          width: "100%",
          borderRadius: 15,
          position: "absolute",
          top: 0,
          right: 0,
        }}
      />
      <View style={{ padding: 15 }}>
        <Text style={styles.title}>{title}</Text>
        <Image
          style={styles.arrow}
          source={require("../assets/arrow-right.png")}
        />
      </View>
      {/* </View> */}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  cardImage: {
    flexGrow: 1,
    margin: "2%",
    borderRadius: 15,
  },
  noImage: {
    flexGrow: 1,
    margin: "2%",
    borderRadius: 15,
    backgroundColor: "#333436",
  },
  title: {
    fontSize: 24,
    color: "#E4E5EA",
    fontWeight: "bold",
    shadowColor: "#000000",
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 1,
    shadowRadius: 4,
  },
  arrow: {
    width: 15,
    height: 15,
    resizeMode: "contain",
    position: "absolute",
    top: 22,
    right: 20,
  },
});

这是屏幕的代码:

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.rowContainer}>
        <NavCard
          title="Map"
          height={180}
          onPress={() => navigation.navigate("Map")}
          background={require("../assets/pvdx1.png")}
        ></NavCard>
        <NavCard
          title="CAD"
          height={180}
          background={require("../assets/pvdx1.png")}
          onPress={() => navigation.navigate("CADScreen")}
        ></NavCard>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 10,
    padding: 4,
    flex: 1,
  },
  rowContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  body: {
    paddingTop: 10,
    fontSize: 16,
    color: "#E4E5EA",
  },
});

export default HomeScreen

如果 View 和 TouchableOpacity 的样式完全相同，有谁知道为什么会弄乱两个组件的宽度？我正在使用 React Native。

编辑:已更新为使用 Image 而不是 ImageBackground(代码现在反射(reflect)了这一点)，但结果是相同的。

Answer 1

我发现了问题:我从 react-native-gesture-handler 而不是 react-native 导入 TouchableOpacity。更改了一下，效果很好。