Есть ли лучший способ сделать одинаковые промежутки между элементами на гибком дисплее?

Question

1. используйте flexbox (потому что он является "родным" по реакции)
2. ширина родительского контейнера в процентах
3. количество элементов может быть 4/5/6/7 ..
4. одинаковые промежутки между элементами
5. как на картинке ниже

Вот мой код:

const styles = {
container: {
  width: screenWidth * 0.9,
  flexWrap: 'wrap',
  flexDirection: 'row'
},
item: {
  backgroundColor: 'red',
  height: 120,
  width: (width * 0.9 - 20) / 3,
  marginBottom: 10
}
}

<View style={styles.container}>
  {items.map((item, idx) =>
    <View style={[styles.item, { marginHorizontal: idx % 3 === 1 ? 10 : 0}]} />
  )}
</View>

Есть ли еще лучший способ реализовать этот макет?

Answer 1

пожалуйста, ознакомьтесь с этой демонстрацией: https://snack.expo.io/@immynk / demo

В соответствии с требуемой шириной высоты вы можете использовать в компоненте View внутри Flatlist, а также вы можете поместить numColumns в соответствии с вашими пожеланиями

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    key: 1,
  },
  {
    key: 2,
  },
  {
    key: 3,
  },
  {
    key: 4,
  },
  {
    key: 5,
  },
  {
    key: 6,
  },
];

export default class App extends React.Component {
  render() {
    return (
      <View>
        <FlatList
          showsVerticalScrollIndicator={false}
          data={DATA}
          numColumns={3}
          renderItem={({ item, index }) => {
            return (
              <View
                style={{
                     backgroundColor: "red",
                    paddingHorizontal: 5,
                    paddingVertical: 5,
                    flexDirection: "row",
                    height:130,
                    width:130

                }}>
               <View style={{backgroundColor:"white",width:"100%"}}>

                </View>

              </View>
            );
          }}
          keyExtractor={item => item.key}
        />
      </View>
    );
  }
}