Существует ли React-Native FlatList для каждого? - PullRequest
Новая
       9

Существует ли React-Native FlatList для каждого?

0 голосов
/ 26 января 2020

Существует ли React-Native FlatList для каждого? В основном я пытаюсь добиться того, чтобы у меня было FlatList, и я хочу добавить анимацию к каждому элементу, и когда анимация завершится, будет визуализирован следующий элемент. Или, по крайней мере, визуализируйте элемент, заставьте его подождать секунду, а затем визуализируют следующий элемент ... Также не будет проблем с оптимизацией, поскольку список, который я отображаю на данном экране, всегда содержит только 3 элемента

1 Ответ

0 голосов
/ 27 января 2020

Никогда не пытайтесь напрямую изменять компонент FlatList, поскольку он является компонентом собственного представления. Вы должны всегда мутировать источник данных и изменять его состояние. Имейте в виду, что если вы делаете это слишком часто, вы рискуете столкнуться с проблемами производительности, потому что вы будете вызывать повторный рендеринг при каждом изменении.

Все, что вам нужно сделать, это анимировать элемент списка, например: 

class ListItem extends PureComponent {

    constructor() {
        super()
        this.state = {
            animateItem: new Animated.Value(0)
        }
    }

    componentDidMount() {
        Animated.timing(this.state.animateItem, {
            toValue: 1,
            duration: 300,
            delay: 300
        }).start()
    }

    render() {
        return (
            <Animated.View
                style={{
                    opacity: this.state.animateItem,
                    transform: [{
                        translateY: this.state.animateItem.interpolate({
                            inputRange: [0, 1],
                            outputRange: [500, 1]
                        })
                    }]
                }}>
                {/* child views here  */}
            </Animated.View>
        )
    }
}

Это оживит ваши предметы снизу вверх. Вы можете установить свойство delay в методе Animated.timing для задержки анимации. FlatList отображает элементы по одному, и они также будут анимированы таким же образом.

...