react-native - 更改方向时如何更改 Flatlist 的 numColumns

Question

我创建了名为 getOrientation() 的函数并将它放在 useEffect 中，这样每当我旋转设备时，它都会重新渲染组件并显示设备的方向。

我还创建了变量来使用钩子(Hook)确定方向

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 的新开发者。感谢大家检查我的问题

Answer 1

尝试像这样向您的 Flatlist 添加一个关键 Prop ，其值为您的方向:

 <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()} />