可触摸的不透明度弄乱了行容器中的宽度

Question

我试图让这两个 Card 组件并排显示，如图所示 here which seems to work when I wrap the component in a View, but appears like this 当我尝试使用 TouchableOpacity.

时，中间有一堆不必要的 space

这是我的 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（代码现在反映了这一点），但结果是一样的。

Answer 1

可能问题出在您的 <ImageBackground /> 中，因为我将其替换为本机 <Image /> 并且它正在运行。这是我的图片的样子，您可以与您的代码进行比较：

<Image
        style={{
          height: height,
          borderRadius: 15,
          position: "absolute",
          top: 0,
          right: 0,
          width: "100%"
        }}
        resizeMode="cover"
        source={{ uri: "https://via.placeholder.com/250x150" }}
      />

Here you can check the working code

Answer 2

我发现了问题：我是从 react-native-gesture-handler 而不是 react-native 导入 TouchableOpacity。更改它，它工作得很好。

可触摸的不透明度弄乱了行容器中的宽度

Touchable Opacity messes up width in row container

react-native

mobile-application

touchableopacity