Question

我有多个嵌套的View，ImageBackground等。每次有一个视图时，都会添加一个额外的边距，并且我的列表处于非常严格的区域。我将margin设置为0，但不能解决问题。

您知道我如何避免在列表周围使用无用的利润吗？我已经测试过将边距设置为0并设置marginLeft，Right等，但我不知道我还有边距

server.xml file

Answer 1

您可以尝试以下操作吗，我刚刚更新了样式。

render() {
return (
      <View style={styles.container}>
        <ImageBackground
          source={require("./images/image1.jpg")}
          style={styles.imageBackground}
        >
          <View style={{ width: "100%", height: "100%" }}>
            <View style={styles.flatListContainer}>
              <View style={styles.List}>
                <FlatList
                  style={{ flex: 1 }}
                  data={[{ key: "ab" }, { key: "cd" }, { key: "ef" }]}
                  renderItem={({ item }) => (
                    <Text style={styles.text}>{item.key}</Text>
                  )}
                />
              </View>
              <View style={styles.midList}>
                <FlatList
                  data={[{ key: "gh" }, { key: "ij" }, { key: "kl" }]}
                  renderItem={({ item }) => (
                    <Text style={styles.text}>{item.key}</Text>
                  )}
                />
              </View>
              <View style={styles.List}>
                <FlatList
                  data={[{ key: "mn" }, { key: "op" }, { key: "qr" }]}
                  renderItem={({ item }) => (
                    <Text style={styles.text}>{item.key}</Text>
                  )}
                />
              </View>
            </View>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
    // alignItems: "center",
    // margin: 0
  },
  mainContainer: {
    flex: 1,
    alignItems: "center"
  },
  flatListContainer: {
    flex: 1,
    // alignItems: "center",
    flexDirection: "row"
    // margin: 0
  },
  List: {
    // margin: 0,
    flex: 1
  },
  midList: {
    flex: 1,
    borderLeftColor: "#00AABB",
    borderLeftWidth: 1,
    // marginLeft: 0,
    borderRightColor: "#00AABB",
    borderRightWidth: 1,
    marginRight: 0
    // marginBottom: 33
  },
  logo: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center"
  },
  imageContainer: {
    flex: 1,
    alignItems: "center",
    flexDirection: "row",
    //backgroundColor: '#fff',
    //justifyContent: 'center',
    alignItems: "center"
  },
  touchOpacity: {
    flex: 1,
    alignItems: "center",
    resizeMode: "contain",
    marginLeft: 0
  },
  imageBackground: {
    width: "100%",
    height: "100%"
    // alignItems: "center"
    // justifyContent: "center"
  },
  headText: {
    flex: 1,
    alignItems: "center",
    textAlign: "center",
    color: "white"
  },
  safety: {
    flex: 0.2,
    alignItems: "center",
    color: "greenyellow"
  },
  text: {
    // flex: 2,
    textAlign: "center",
    color: "white",
    backgroundColor: "red"
  }
});

在RN中使用多个视图时的边距

1 个答案: