React Native：样式相互覆盖并且容器不在位置

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%"
  }
});

下面的图片显示了更好的表示，但为了彻底解释它，我有一个容器，其中有一个子容器，其中包含有关发射名称、位置、日期、火箭等的信息以及子容器应该很好地适合每个容器/卡片（卡片用于每个火箭发射事件，它有自己的带有填充的容器等）但有时某些文本会变得太长并且必须占据另一行。这会迫使子容器向下移动（显示在“不应该如此”的图像中并从容器/卡片中延伸出来。问：有没有一种方法可以使文本需要另一个子容器与其中的文本一起向上移动的行，因此它仍然适合容器/卡片并且不会延伸到它之外？或其他解决方案。

Answer 1

解决此问题的一种方法是绝对定位您的 subContainer 使用bottom:0 到Container 的底部，而不是 提供marginTop:420。这样子容器视图将 始终坚持 Container View 的底部。而提供 marginTop:420 将使 subContainer View 总是有 marginTop 的 420，当它变大时会向下推。你也可以玩 with left: 0 and right: 0 为 subContainer 占满 其父 View 的宽度，即 Container。

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

检查并判断它是否有帮助。