реагировать на нативный анимированный плоский список за элементом

Question

Я ищу способ сделать анимированный плоский список за элементом. когда один элемент заканчивает свою анимацию, следующий элемент (из плоского списка) будет на экране

class AnimatedFlatList extends React.PureComponent {
    state = {selected: (new Map(): Map<string, boolean>)};
    let data = {[
        {"first_name":"ltorrejon0@si.edu"},
        {"first_name":"ichadbourne1@icq.com"},
        {"first_name":"ascorthorne2@mediafire.com"},
        {"first_name":"jlathwood3@xing.com"},
        {"first_name":"molkowicz4@ftc.gov"},
        {"first_name":"motridge5@tiny.cc"},
        {"first_name":"rcess6@hostgator.com"},
        {"first_name":"mmaundrell7@php.net"},
        {"first_name":"ufairburne8@instagram.com"},
        {"first_name":"pangel9@biglobe.ne.jp"}]
    };

    _keyExtractor = (item, index) => item.id;

    _onPressItem = (id: string) => {
        // updater functions are preferred for transactional updates
        this.setState((state) => {
            // copy the map rather than modifying state.
            const selected = new Map(state.selected);
            selected.set(id, !selected.get(id)); // toggle
            return {selected};
        });
    };

    _renderItem = (item) => (
        <View style={Styles.viewItem}}>
            <Text style={Styles.textItem>{item.text}</Text>
        </View>
    );

    render() {  
        return (
            <FlatList
                data={data}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }
}

Когда я сделал animatedView в renderItem, он работает все вместе, и это не то, что я ищу.

Вид таким образом (но без нажатия на кнопку, он загрузится автоматически)

Answer 1

Оформить заказ Animated.Stagger . Запускает анимацию параллельно, но с определенной задержкой.

Answer 2

Возможно, есть лучшее решение, но я использую delay свойство Animated.timing(), и оно хорошо работает для меня.

Мой компонент элемента выглядит следующим образом:

export default class CustomItem extends Component {

    constructor(props) {
        super(props);

        this.state = {
            scaleValue: new Animated.Value(0)
        }
    }

    componentDidMount() {
        Animated.timing(this.state.scaleValue, {
            toValue: 1,
            duration : 600,
            delay: this.props.index * 350
        }).start();
    }

    render() {
        return (
            <Animated.View style={{ opacity: this.state.scaleValue }}>
                { this.props.children }
            </Animated.View>
        );
    }
}

А вот и плоский список:

...
renderItem(item) {
    return (
        <CustomItem index={ item.index } >
            <Text>{ item.first_name }</Text>
        </CustomItem>
    );
}

render() {
    return (
        <FlatList
            keyExtractor={this._keyExtractor}
            data={data }
            renderItem={ this.renderItem.bind(this) }
        />
    );
}

Таким образом, каждый отдельный элемент будет задерживать на 350 миллисекунд больше, чем элемент перед ним.

Конечно, вы можете изменить duration анимации и свойство delay и найти идеальную анимацию для вас:)

Вы должны быть осторожны с количеством предметов, потому что вы можете ждать слишком много времени, чтобы увидеть последний предмет:)