how to align elements horizontally in flatlist react native?

问题

I would like to achieve this:

https://imgur.com/a/9aI1HJk

My Result:

https://imgur.com/a/qATfSk1

I'm new I don't know very well how to achieve that alignment, any help is appreciated :)

My code:

    <View style={styles.calendar}>
      <View style={styles.calendar_week}>
        <FlatList
          data={daysWeek}
          keyExtractor={(item) => item.id}
          numColumns={7}
          renderItem={({item}) => (
            <Text style={styles.dayWeek}>{item.day}</Text>
          )}
        />
      </View>

      <View style={styles.calendar_week}>
        <FlatList
          data={days}
          style={styles.calendar_week_days}
          numColumns={7}
          renderItem={({item}) => <Text style={styles.daysWeek}>{item}</Text>}
        />
      </View>
    </View>

calendar: {
    width: '100%',
    alignItems: 'center',
  },
calendar_week: {
    width: '90%',
    backgroundColor: 'green',
    flexDirection: 'row',
  },
  dayWeek: {
    fontSize: 18,
    marginHorizontal: 16,
  },
  calendar_week_days: {
    width: '90%',
    backgroundColor: 'red',
  },
  daysWeek: {
    marginHorizontal: 19,
  }, ```

回答1:

When you are using column in Flatlist you should be aware of:

The column width is dynamically changed according to the number of item you have for that flat list , so for avoiding that you should use a fixed width , for items. If you want to have another flatlist with the same manner you should use the same style for that flat lists items too

<FlatList
          data={["aa","vv","aaz","zz","sv","qq","ee",]}
          keyExtractor={(item) => item.id}
          numColumns={7}
          style={{width:600}}
          contentContainerStyle={{width:100}}
          renderItem={({item}) => (
              <View style={{backgroundColor:"green",marginHorizontal:4,width:50,alignItems:"center"}}>
                   <Text style={styles.dayWeek}>{item}</Text>
              </View>
           
          )}
        />
        <FlatList
          data={["1","2","3","4","5","6","9","12","13","11","22","43","41","2","3","1","2","3",]}
          keyExtractor={(item) => item.id}
          numColumns={7}
          renderItem={({item}) => (
            <View style={{backgroundColor:"red",marginHorizontal:4,marginVertical:3,width:50,alignItems:"center"}}>
            <Text >{item}</Text>
       </View>
          )}
        />

回答2:

set the equal width for each item and align text to center and make parent width "100%"

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const itemWidth = windowWidth/7 ;
    calendar: {
        width: '100%',
        alignItems: 'center',
      },
    calendar_week: {
        width: '100%',
        backgroundColor: 'green',
        flexDirection: 'row',
      },
      dayWeek: {
        fontSize: 18,
        textAlign:"center",
        width:itemWidth -> change here
      },
      calendar_week_days: {
        width: '100%',
        backgroundColor: 'red',
      },
      daysWeek: {
       textAlign:"center",
       width:itemWidth  -> change here
      }, 

```

来源：https://stackoverflow.com/questions/64814743/how-to-align-elements-horizontally-in-flatlist-react-native

标签

javascript

react-native

react-native-flatlist