如何解决更改方向时如何更改Flatlist的numColumns
我创建了函数名称getOrientation()并将其放在useEffect上,以便每当旋转设备时,它将重新渲染组件并向我显示设备的方向。
我还创建了变量以使用钩子确定方向
getOrientation()
const [orientation,setOrientation] = useState("")
const window = useWindowDimensions()
const getOrientation = () => {
if (window.height < window.width) {
setOrientation("LANDSCAPE")
} else {
setOrientation("PORTRAIT")
}
return orientation
}
使用时效果
useEffect(() => {
getOrientation()
})
console.log(orientation)
我的问题是我想在Flatlist(LANDSCAPE)中将numsColumns设置为2,在纵向模式下等于1,但是错误弹出窗口告诉我不能即时更改numColumns。我该怎么办?
这是我的单位列表
<View style={styles.container}>
<FlatList
contentContainerStyle={{
paddingLeft: insets.left,paddingRight: insets.right,}}
data={dishes.dishes}
numColumns={orientation == "LANDSCAPE" ? 2 : 1}
renderItem={({ item,index }) => (
<Tile
style={styles.tileItem}
key={index}
title={item.name}
caption={item.description}
onPress={() => navigation.navigate('Dishdetail_Screen',{ dishId: item.id })} // passing infor from one to another screen
// chevron={false}
featured
imageSrc={{
uri: baseUrl + item.image
}}
/>
)}
keyExtractor={item => item.id.toString()} />
</View>
此令人毛骨悚然的错误 enter image description here
P / s:我是新的React-Native开发人员。感谢所有检查我的问题的人
解决方法
尝试像这样向您的Flatlist添加关键道具,其值就是您的方向:
<FlatList
key={orientation} // add key prop here
contentContainerStyle={{
paddingLeft: insets.left,paddingRight: insets.right,}}
data={dishes.dishes}
numColumns={orientation == "LANDSCAPE" ? 2 : 1}
renderItem={({ item,index }) => (
<Tile
style={styles.tileItem}
key={index}
title={item.name}
caption={item.description}
onPress={() => navigation.navigate('Dishdetail_Screen',{ dishId: item.id })} // passing infor from one to another screen
// chevron={false}
featured
imageSrc={{
uri: baseUrl + item.image
}}
/>
)}
keyExtractor={item => item.id.toString()} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。