ReactNative: стили переопределяют друг друга, и контейнер выходит из позиции

Question

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      let launches = this.state.dataSource.map((item, key) => {
        return (
          <View key={key} style={styles.container}>
            <Image
              style={{ width: 350, height: 520, borderRadius: 10 }}
              source={{ uri: item.rocket.imageURL }}
            />
            <Entypo
              name="map"
              color={"white"}
              size={24}
              style={styles.MapIcon}
              onPress={() => Linking.openURL(item.location.pads[0].mapURL)}
            />
            <Entypo
              name="video-camera"
              color={"white"}
              size={24}
              style={styles.VideoIcon}
              onPress={() => Linking.openURL(item.vidURLs[0])}
            />

            <View style={styles.subcontainer}>
              <Text style={styles.Title}>{item.missions[0].name}</Text>
              <Text>
                <Text style={styles.TextHeader}>Location: </Text>
                <Text style={styles.Text}>{item.location.name}</Text>
              </Text>
              <Text>
                <Text style={styles.TextHeader}>Launch Date: </Text>
                <Text style={styles.Text}>{item.net}</Text>
              </Text>
              <Text>
                <Text style={styles.TextHeader}>Service Provider: </Text>
                <Text style={styles.Text}>{item.lsp.name}</Text>
              </Text>
              <Text>
                <Text style={styles.TextHeader}>Rocket: </Text>
                <Text style={styles.Text}>{item.rocket.name}</Text>
              </Text>
            </View>
          </View>
        );
      });

      return (
        <View style={styles.Background}>
          <ScrollView contentContainerStyle={styles.contentContainer}>
            {launches}
          </ScrollView>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  Background: {
    backgroundColor: "#e8e8e8"
  },
  contentContainer: {
    padding: 3,
    backgroundColor: "#e8e8e8"
  },
  subcontainer: {
    backgroundColor: "rgb(249, 249, 249)",
    position: "absolute",
    borderRadius: 2,
    padding: 10,
    marginTop: 420,
    width: "100.65%",
    marginLeft: "2.94%",
    shadowColor: "grey",
    shadowOpacity: 0.5,
    shadowRadius: 2,
    shadowOffset: { width: 0, height: -1 }
  },
  container: {
    flex: 1,
    borderRadius: 10,
    backgroundColor: "rgba(249, 249, 249, 0.8)",
    padding: 10,
    borderWidth: 0.5,
    borderColor: "#CCCCCC",
    marginTop: 4
  },
  Title: {
    color: "#007AFF",
    fontSize: 18,
    textAlign: "center",
    lineHeight: 18,
    paddingBottom: 5,
    fontWeight: "bold"
  },
  Text: {
    color: "black",
    fontSize: 14,
    textAlign: "left"
  },
  TextHeader: {
    color: "#007AFF",
    fontSize: 14,
    textAlign: "left",
    fontWeight: "bold"
  },
  MapIcon: {
    position: "absolute",
    marginTop: "7%",
    marginLeft: "8%"
  },
  VideoIcon: {
    position: "absolute",
    marginTop: "7%",
    marginLeft: "92%"
  }
});

На рисунках ниже показано лучшее представление, но для подробного объяснения у меня есть контейнер, в котором есть субконтейнер с информацией о названии запуска, месте, дате, ракете и т. Д., А также субконтейнер должен хорошо вписываться в каждый контейнер / карту (карта для каждого события запуска ракеты, он получает свой собственный контейнер с отступом и т. д.), но иногда часть текста становится слишком длинной и должна занимать другую строку. Это заставляет субконтейнер перемещаться вниз (отображается на изображении «как это не должно быть») и вытягиваться из контейнера / карты. Q: существует ли такой способ, что всякий раз, когда текст требует другой строки что субконтейнер перемещается вверх вместе с текстом в нем, так что он по-прежнему помещается в контейнер / карту и не выходит за его пределы? или другое решение.

Answer 1

Одним из способов решения этой проблемы является абсолютное позиционирование вашего subContainer в нижней части контейнера, используя bottom:0, вместо предоставления marginTop:420. Таким образом, представление SubContainer будет всегда придерживайтесь нижней части Контейнерного Представления. Принимая во внимание, что предоставление marginTop: 420 сделает представление SubContainer всегда имеющим marginTop из 420, который будет толкать его вниз, когда он станет большим. Вы также можете играть с левым: 0 и правым: 0 для подконтейнера, чтобы занять полный ширина родительского просмотра, т. е. контейнера.

class App extends React.Component {
  render() {
    return (
      <ScrollView style={{marginTop: 25}} >
        {[1,2,3,4,5].map(() => (
          <View style={styles.container}>
            <View style={styles.subContainer} >
              <Text>on every element in the calling array on every element in the calling array on every element in the calling array</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    height: 300,
    margin: 10
  },
  subContainer: {
    backgroundColor: '#eee',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    margin: 10,
    padding: 5,
    borderRadius: 2
  },
});

Проверьте рабочий пример: https://snack.expo.io/SyXDLkEDX

Проверьте и скажите, помогает ли это.