2

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

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

获取方向（）

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>

这个令人毛骨悚然的错误 在此处输入图像描述

P/s：我是新的 React-Native 开发者。感谢所有检查我问题的人

4

1 回答 1

3

尝试像这样向您的平面列表添加一个关键道具，其值为您的方向：

 <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()} />
于 2020-08-12T12:48:56.627 回答