Как изменить numColumns Flatlist при изменении ориентации

Question

Я создал функцию с именем 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)

Моя проблема в том, что я хочу установить numsColumns = 2 в Flatlist (LANDSCAPE) и равным 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. Спасибо всем, кто проверяет мои проблемы

Answer 1

Попробуйте добавить ключевую опору в свой Flatlist, например, со значением ur ориентация:

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