[英]how to align elements horizontally in flatlist react native?
I would like to achieve this:我想实现这一目标:
https://imgur.com/a/9aI1HJk https://imgur.com/a/9aI1HJk
My Result:我的结果:
https://imgur.com/a/qATfSk1 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:当您在 Flatlist 中使用 column 时,您应该注意:
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>
)}
/>
set the equal width for each item and align text to center and make parent width "100%"为每个项目设置相等的宽度并将文本对齐到中心并使父宽度为“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
},
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.