如何在平面列表中水平对齐元素反应本机？

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

&nbsp;&nbsp;当您在 Flatlist 中使用列时，您应该注意：列宽根据该平面列表的项目数量动态更改，因此为了避免您应该对项目使用固定宽度。如果您想以相同的方式拥有另一个平面列表，您也应该对该平面列表项目使用相同的样式<FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={["aa","vv","aaz","zz","sv","qq","ee",]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={(item) => item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numColumns={7}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{width:600}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentContainerStyle={{width:100}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={({item}) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{backgroundColor:"green",marginHorizontal:4,width:50,alignItems:"center"}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text style={styles.dayWeek}>{item}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={["1","2","3","4","5","6","9","12","13","11","22","43","41","2","3","1","2","3",]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={(item) => item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numColumns={7}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={({item}) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{backgroundColor:"red",marginHorizontal:4,marginVertical:3,width:50,alignItems:"center"}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text >{item}</Text>&nbsp; &nbsp; &nbsp; &nbsp;</View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; />

Answer 2

为每个项目设置相等的宽度并将文本居中对齐并使父宽度“100%”import { Dimensions } from 'react-native';const windowWidth = Dimensions.get('window').width;const itemWidth = windowWidth/7 ;&nbsp; &nbsp; calendar: {&nbsp; &nbsp; &nbsp; &nbsp; width: '100%',&nbsp; &nbsp; &nbsp; &nbsp; alignItems: 'center',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; calendar_week: {&nbsp; &nbsp; &nbsp; &nbsp; width: '100%',&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'green',&nbsp; &nbsp; &nbsp; &nbsp; flexDirection: 'row',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; dayWeek: {&nbsp; &nbsp; &nbsp; &nbsp; fontSize: 18,&nbsp; &nbsp; &nbsp; &nbsp; textAlign:"center",&nbsp; &nbsp; &nbsp; &nbsp; width:itemWidth -> change here&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; calendar_week_days: {&nbsp; &nbsp; &nbsp; &nbsp; width: '100%',&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'red',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; daysWeek: {&nbsp; &nbsp; &nbsp; &nbsp;textAlign:"center",&nbsp; &nbsp; &nbsp; &nbsp;width:itemWidth&nbsp; -> change here&nbsp; &nbsp; &nbsp; },&nbsp;```