如何在flatlist中水平对齐元素反应原生? [英] how to align elements horizontally in flatlist react native?

问题描述

我想实现这一目标:

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

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

项目.id}numColumns={7}样式={{宽度:600}}contentContainerStyle={{width:100}}renderItem={({item}) =>(<视图样式={{backgroundColor:"green",marginHorizo​​ntal:4,width:50,alignItems:"center"}}><Text style={styles.dayWeek}>{item}</Text></查看>)}/><平面列表数据={[1"、2"、3"、4"、5"、6"、9"、12"、13"、";11"、22"、43"、41"、2"、3"、1"、2"、3"、]}keyExtractor={(item) =>项目.id}numColumns={7}renderItem={({item}) =>(<视图样式={{backgroundColor:"red",marginHorizo​​ntal:4,marginVertical:3,width:50,alignItems:"center"}}><文本>{项目}</文本></查看>)}/>

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

解决方案

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

这篇关于如何在flatlist中水平对齐元素反应原生?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！