Css ReactNative：样式相互覆盖，容器失去位置 render（）{ if（此.state.isLoading）{ 返回( ); }否则{ 让启动=this.state.dataSource.map（（项，键）=>{ 返回( Linking.openURL（item.location.pads[0].mapURL）} /> Linking.openURL（item.vidURLs[0]）} /> {item.missions[0].name} 地点： {item.location.name} 推出日期： {item.net} 服务提供者： {item.lsp.name} 火箭： {item.rocket.name} ); }); 返回( {发射} ); } } } const styles=StyleSheet.create({ 背景：{ 背景色：“e8e8e8” }, 内容容器：{ 填充：3， 背景色：“e8e8e8” }, 分包商：{ 背景颜色：“rgb（249249249）”， 位置：“绝对”， 边界半径：2， 填充：10， 玛金托普：420， 宽度：“100.65%”， 保证金金额：2.94%， 阴影颜色：“灰色”， 阴影不透明度：0.5， 阴影半径：2， 阴影偏移：{宽度：0，高度：-1} }, 容器：{ 弹性：1， 边界半径：10， 背景色：“rgba（249249249249,0.8）”， 填充：10， 边框宽度：0.5， 边框颜色：“#中交”， 玛金托普：4 }, 标题：{ 颜色：“007AFF”， 尺码：18， textAlign：“居中”， 线高：18， 填充底部：5， fontWeight：“粗体” }, 正文：{ 颜色：“黑色”， 尺寸：14， textAlign：“左” }, 文本标题：{ 颜色：“007AFF”， 尺寸：14， textAlign：“左”， fontWeight：“粗体” }, MapIcon：{ 位置：“绝对”， 玛金托普：“7%”， 保证金左图：“8%。” }, 视频图标：{ 位置：“绝对”， 玛金托普：“7%”， marginLeft：“92%。” } });

下面的图片显示了一个更好的表示，但为了彻底解释它，我有一个容器，其中有一个子容器，其中包含有关发射名称、位置、日期、火箭等的信息，子容器应该很好地装入每个容器/卡中（卡片用于每个火箭发射事件，它有自己的带有填充物的容器等），但有时一些文本变得太长，不得不占用另一行。这会迫使子容器向下移动（显示在“如何不应该”中）图像并从容器/卡中向外扩展。Q:是否有一种方法，使得每当文本需要另一行时，子容器会随着其中的文本向上移动，以便它仍然适合容器/卡，而不会向外扩展？或者另一种解决方案

解决这个问题的一个方法是确定你的位置 使用

bottom:0将容器分包到容器底部
提供
marginTop:420
。这样子客户视图将
始终坚持容器视图的底部。而
marginTop:420将使Subcainer视图始终具有marginTop of
420，当它变大时，它会向下推。你也可以玩
左：0和右：0，以便分包商占用全部空间
其父视图（即容器）的宽度

类应用程序扩展了React.Component{
render（）{
返回(
{[1,2,3,4,5].map（（）=>(
在调用数组中的每个元素上在调用数组中的每个元素上在调用数组中的每个元素上
))}
);
}
}
const styles=StyleSheet.create({
容器：{
背景颜色：“蓝色”，
身高：300，
差额：10
},
分包商：{
背景颜色：“#eee”，
位置：'绝对'，
底部：0，
右:0,，
左:0,，
差额：10，
填充：5，
边界半径：2
},
});

查看工作示例：

检查并告知是否有帮助

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

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
  },
});