2 回答

TA貢獻1827條經驗 獲得超9個贊
當您在 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>
)}
/>

TA貢獻1853條經驗 獲得超18個贊
為每個項目設置相等的寬度并將文本居中對齊并使父寬度“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
},
```
添加回答
舉報