React Native FlatList安卓端右滑入动画失效，iOS正常求解决方案

你遇到的这个横向FlatList入场动画在Android失效、iOS正常的问题，我之前也碰到过——核心原因大概率是固定的初始translateX值（450）不匹配Android设备的布局逻辑，再加上Android和iOS上FlatList的item渲染时机有差异，componentDidMount触发时item可能还没完成布局，导致动画表现异常。

下面给你几个针对性的修复方案，还有能实现同款效果的替代方案：

方案1：修复现有组件，适配Android #

调整初始偏移值为屏幕宽度 #

固定的450在不同尺寸的Android设备上会出现适配问题，改用屏幕宽度作为初始偏移，确保item从屏幕右侧外精准进入：

首先导入Dimensions工具：

import { Dimensions } from 'react-native';
const SCREEN_WIDTH = Dimensions.get('window').width;

然后修改FadeInView组件，改用onLayout触发动画（确保item布局完成后再执行）：

export class FadeInView extends Component {
  state = {
    rightToLeftAnim: new Animated.Value(SCREEN_WIDTH), // 用屏幕宽度替代固定450
    fadeAnim: new Animated.Value(0),
  };

  // 布局完成后启动动画，避免Android上渲染时机问题
  startAnimation = () => {
    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
        onLayout={this.startAnimation}
        style={[rightToLeft, { flex: 1, ...this.props.style, opacity: fadeAnim }]}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

额外优化：关闭FlatList的removeClippedSubviews #

Android上FlatList默认开启了removeClippedSubviews，可能会提前销毁屏幕外的item，影响动画执行，需要关闭这个属性：

<FlatList
  style={{ marginTop: Platform.OS === 'ios' ? 0 : 60 }}
  data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
  horizontal={true}
  removeClippedSubviews={false} // 添加该属性修复item被提前销毁的问题
  renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
/>

方案2：使用Reanimated v2实现更稳定的跨平台动画 #

如果原生Animated组件还是有兼容性问题，可以试试Reanimated库——它的动画基于原生驱动，跨平台表现更一致：

首先安装依赖：

npm install react-native-reanimated@^2
# 或 yarn add react-native-reanimated@^2

然后实现函数式版本的FadeInView：

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSequence,
  withDelay,
  withTiming,
  Easing,
} from 'react-native-reanimated';
import { useEffect, Dimensions } from 'react';
const SCREEN_WIDTH = Dimensions.get('window').width;

const FadeInView = ({ index, style, children }) => {
  const translateX = useSharedValue(SCREEN_WIDTH);
  const opacity = useSharedValue(0);

  useEffect(() => {
    // 逐个延迟执行动画
    translateX.value = withSequence(
      withDelay((index + 1) * 1000, SCREEN_WIDTH),
      withTiming(0, {
        duration: 1000,
        easing: Easing.inOut(Easing.quad),
      })
    );
    opacity.value = withSequence(
      withDelay((index + 1) * 1000, 0),
      withTiming(1, {
        duration: 1000,
      })
    );
  }, [index]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
      opacity: opacity.value,
    };
  });

  return (
    <Animated.View style={[animatedStyle, { flex: 1 }, style]}>
      {children}
    </Animated.View>
  );
};

方案3：使用LayoutAnimation实现批量入场动画（简化版） #

如果不需要逐个延迟的效果，只是要统一的右到左淡入，LayoutAnimation是更简单的选择：

在父组件的componentDidMount中设置全局动画：

import { LayoutAnimation } from 'react-native';

class MyPlans extends Component {
  componentDidMount() {
    LayoutAnimation.configureNext({
      duration: 1000,
      create: {
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity | LayoutAnimation.Properties.scaleX,
      },
    });
  }

  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}) => <View style={this.moduleStyle}><Text>{item.key}</Text></View>}
        />
      </View>
    );
  }
}

注：该方案无法实现逐个延迟的效果，适合批量入场的场景。

你的效果对比：
Android端表现：

iOS端表现：

内容的提问来源于stack exchange，提问作者Aharon Vishinsky