如何在flatlist中水平对齐元素反应原生？

Question

我想实现这一目标：

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

我的结果：

https://imgur.com/a/qATfSk1

我是新手我不太清楚如何实现这种对齐，任何帮助表示赞赏:)

我的代码：

    <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,
  }, ```
  

Answer 1

当您在 Flatlist 中使用 column 时，您应该注意：

列宽根据您对该平面列表拥有的项目数动态更改，因此为避免您应该使用固定宽度的项目。 如果您想以相同的方式拥有另一个平面列表，您也应该为该平面列表项使用相同的样式

<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>
          )}
        />

Answer 2

为每个项目设置相等的宽度并将文本对齐到中心并使父宽度为“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
      }, 

```