在项目后反应原生动画平面列表项目

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

也许有一个更好的解决方案,但我使用的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属性,并为您找到完美的动画:)

你需要小心项目的数量,因为你可以等待太多时间看到最后一项:)