如何解决2列Flatlist组件无法正确分配列
我有一个包含2行的flatlist组件,但各列分配不正确。我在设计样式时遇到麻烦。 我的单位列表:
<FlatList
contentContainerStyle={styles.list}
numColumns={2}
data={this.props.route.params.data}
keyExtractor={(item,index) => item.id}
renderItem={({item}) => (
<TouchableOpacity
style={styles.view}
onPress={() =>
item.subcategories
? this.props.navigation.navigate('Browse',{
screen: 'Subcategories',params: {data: item.subcategories},})
: this.props.navigation.navigate('Browse',{
screen: 'Products',params: {id: item.id},})
}
underlayColor="grey">
<View style={styles.view}>
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity>
)}
/>
样式:
const styles = StyleSheet.create({
container: {
flex: 1,marginTop: StatusBar.currentHeight || 0,},list: {
flexDirection: 'column',view: {
backgroundColor: 'grey',alignItems: 'center',justifyContent: 'center',alignContent: 'stretch',margin: 1,item: {
backgroundColor: '#f9c2ff',padding: 20,marginVertical: 8,marginHorizontal: 2,title: {
textAlign: 'center',fontSize: 20,padding: 5,width: '100%',});
外观如下:https://i.stack.imgur.com/DGmEy.png。我知道我可以将宽度设置为一个数字,但是我希望它可以随着屏幕尺寸动态变化。
解决方法
您可以尝试将width: '50%'
添加到视图样式还是width: Dimensions.get('window').width / 2
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。