Поля при использовании нескольких представлений в RN

Question

У меня есть несколько представлений, ImageBackground и т. Д., Которые все вложенные. Каждый раз, когда есть просмотр, добавляется дополнительное поле, и мой список находится в очень узкой области. Я установил поле на 0, но это не решило проблему.

Знаете ли вы, как я могу избежать ненужных полей в списке? Я проверил, чтобы установить margin 0 и marginLeft, Right и т. Д., Но я не понимаю, как у меня все еще есть margin

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

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