时间戳

首页 > 解决方案 > 在 RN 中使用多个视图时的边距

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

问题描述

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

你知道我怎样才能避免列表周围无用的边距吗？我已经测试将边距设置为 0 和 marginLeft、Right 等，但我不明白我仍然有边距的方式

render() {
    return (
      <View style ={styles.container}>
         <ImageBackground
              source={require("./images/image1.jpg")}
              style={styles.imageBackground}>

            <View style ={{flex:14}}>

                  <View style={styles.flatListContainer}>
                          <View style={styles.List}>
                             <FlatList
                                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
  },
  midList: {
    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',
  },
});
```

标签： react-nativeflexbox

解决方案

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

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

推荐阅读