如何在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
      }, 

```