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

授予Thunderbird以查看组件，它是FlatList的父级。

public function downloadUsagePdf()
    {
        return Storage::disk('default')
            ->response('path/to/usage.pdf', 'new-file-name.pdf');
    }

Answer 2

请使用flatList getItemLayou属性，或将数据版本升级到0.59.5以上。

平面列表安卓动画没有按预期工作

2 个答案: