React Native 动画 FlatList 逐项滚动效果

Question

我正在寻找一种方法来制作动画的平面列表项，每个项目完成动画后，下一个项目（从平面列表中）将出现在屏幕上。

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中时，它会一起运行，这不是我想要的效果。就像这样（但不需要按按钮，它将自动加载）。

- Manspof

Answer 1

< p >也许这不是最好的解决方案，但我正在使用Animated.timing()的delay属性，并且它对我很有效。

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

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>
        );
    }
}

这里是FlatList：

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

当然，你可以更改动画的持续时间和延迟属性，找到适合你的完美动画 :)

你需要注意项目的数量，因为你可能需要等待太长时间才能看到最后一个项目 :)

- Hristo Eftimov

---

是的，没错。您可以按照这个教程进行操作：https://hackernoon.com/how-to-animate-the-items-of-a-react-native-flatlist-32c8cbf7ea3d 来设置动画。 - Hristo Eftimov

终于找到了好的解决方案 :) 谢谢 - Nijat Aliyev

谢谢你，伙计。我找了一个星期的FlatList动画。这段代码完美地运行了。非常感激。 - Haktan Enes Biçer

很棒的解决方案。您能否更新一下如何从FlatList中以动画效果删除单个项目的方法？就像我们删除电子邮件时它会消失一样。 - Samiksha Jagtap

@Manspof 你可以限制滚动事件或在动画（延迟）结束之前禁用它 :) 但是，是的，这是这种方法的缺点之一 :) - Hristo Eftimov

Answer 2

请查看 Animated.Stagger。它可以并行运行动画，但是可以指定逐个延迟。

- Parth Chokshi