如何在 flatlist 中水平对齐元素反应本机？

Question

我想实现这个：

我的结果：

我是新手，我不太了解如何实现对齐，感谢您的帮助:)

我的代码：

    <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

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

```

Answer 2

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

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

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

如何在 flatlist 中水平对齐元素反应本机？

how to align elements horizontally in flatlist react native?

javascript

react-native

react-native-flatlist