一个接一个地反应本地动画平面列表项 [英] react native animated flatlist item after item

问题描述

我正在寻找一种可以逐项制作动画平面清单的方法。当一个项目完成动画后，下一个项目（来自平面列表）将显示在屏幕上

I'm looking a way to make animated flatlist item after item. when one item finish his animation so next item(from the flatlist) will be on the screen

class AnimatedFlatList extends React.PureComponent {
    state = {selected: (new Map(): Map<string, boolean>)};
    let data = {[
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"},
        {"first_name":"[e-mail]"}]
    };

    _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 即可一起运行，而不是我想要的。

When I did animatedView into the renderItem it runs all together and it not what I'm looking for.

这种> （但无需按按钮，会自动加载）

Kind of this way (but without press on the button, it will load automatically)

推荐答案

也许这不是最好的解决方案，但我使用的是 delay Animated.timing（）的code>属性，对我来说效果很好。

Maybe this is not the best solution but I am using the delay property of Animated.timing() and it works well for me.

我的项目组件看起来像这样：

My item component looks like this:

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 毫秒

So, every single item will delay 350 milliseconds more than the item before it.

当然，您可以更改动画的持续时间和 delay 属性，并为您找到理想的动画：）

Of course, you can change the duration of the animation and the delay property and find the perfect animation for you :)

您需要注意项目数，因为您可能要花太多时间才能看到最后一个项目：）

You need to be careful with the number of the items because you can wait too much time to see the last item :)

这篇关于一个接一个地反应本地动画平面列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！