如何在平面列表中水平对齐元素反应原生？答案

【问题标题】：how to align elements horizontally in flatlist react native?如何在平面列表中水平对齐元素反应原生？
【发布时间】：2020-11-13 02:45:04
【问题描述】：

我想实现这个：

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

【问题讨论】：

嘿，你也可以提供你的数据吗？

标签： javascript react-native react-native-flatlist

【解决方案1】：

当您在 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>
          )}
        />

【讨论】：

【解决方案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
      }, 

```

【讨论】：