react-native - 平面列表 android 动画无法按预期工作

Question

我正在尝试对 flatList 内的项目制作动画。每个项目将从右到左出现。在 IOS 上可以正常工作，但在 ANDROID 上不行。

动画包含淡入和变换： translateX 动画。

如果有其他方法可以在 IOS 上制作，我会很高兴在这里，它应该是一个动态列表

FadeInView 组件：

export class FadeInView extends Component {
state = {
    rightToLeftAnim: new Animated.Value(450),
    fadeAnim: new Animated.Value(0),
};

componentDidMount() {
    Animated.sequence([
        Animated.delay((this.props.index + 1) * 1000),
        Animated.parallel([
            Animated.timing(
                this.state.rightToLeftAnim,
                {
                    toValue: 0,
                    duration: 1000,
                    easing: Easing.inOut(Easing.quad),
                    useNativeDriver: true,
                }
            ),
            Animated.timing(
                this.state.fadeAnim,
                {
                    toValue: 1,
                    duration: 1000,
                    useNativeDriver: true,
                }
            )
        ])
    ]).start();

}

render() {
    let { fadeAnim,rightToLeftAnim } = this.state;

    const rightToLeft = {
        transform: [{translateX: rightToLeftAnim}]
    };

    return (
        <Animated.View                
            style={[rightToLeft,{flex: 1, ...this.props.style, opacity: fadeAnim,}]}
        >
            {this.props.children}
        </Animated.View>
    );
}

}

父组件：

 class MyPlans extends Component {
  constructor(props) {
    super(props);
   }
    render() {
    return (
        <View>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);
}

Answer 1

请使用 flatList getItemLayou 属性，或将 rn 版本更新到 0.59.5 以上。

Answer 2

style={{flex:1}}交给View Component，它是 FlatList 的父级。

return (
        <View style={{flex:1}}>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);