Блог

Я пытаюсь сделать так , чтобы эти два компонента карты отображались рядом друг с другом в ряд, как показано здесь, что, похоже, работает, когда я оборачиваю компонент в a View , но выглядит так с кучей ненужного пространства между ними, когда я пытаюсь сделать это с a TouchableOpacity .

Вот мой код для компонента карты (в настоящее 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 (код теперь отражает это), но результат тот же.

Вероятно , проблема в вашем <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" }}
      />
 

Здесь вы можете проверить рабочий код

Я понял проблему: я импортировал TouchableOpacity из react-native-gesture-handler вместо react-native . Изменил его, и он работает просто отлично.