React Native中Animated.FlatList如何获取当前滑动页位置/序号实现条件渲染

核心原因：Animated.Value是动画专用变量，不会触发组件重渲染，直接用它的值做判断无法更新UI。以下是两种可直接落地的实现方案：

方案1：监听滑动结束事件（推荐，性能最优） #

引导页为分页滚动模式，只需要在滑动停止后计算当前页码即可，性能开销最低。

实现步骤 #

• 引入Dimensions获取屏幕宽度，声明state存储当前页码
• 给Animated.FlatList添加onMomentumScrollEnd回调，滑动停止后计算当前页码并更新state
• 用state值做条件渲染，控制不同按钮的显示隐藏

代码示例 #

import { Dimensions } from 'react-native';
const { width: screenWidth } = Dimensions.get('window'); // 单页宽度为屏幕满宽

const OnBoardScreen = () => {
  const scrollX = useRef(new Animated.Value(0)).current;  
  const [currentPage, setCurrentPage] = useState(0); // 新增state存储当前页码

  // flatlist render function
  const renderSplash = ({ item, index }) => {
    return (
      <View style={[styles.mainWrapper, {width: screenWidth}]}> {/* 给item指定宽度 */}
        <View style={styles.imageWrapper}>{item.image}</View>
        <View style={[styles.titleWrapper,
            {marginTop:index==1 ? hp(4):index == 2 ? hp(10):null}
        ]}>
          <Text style={styles.titleText}>{item.title}</Text>
        </View>
        <View style={styles.bodyWrapper}>
          <Text style={styles.bodyText}>{item.body}</Text>
        </View>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      {/* background Svgs */}
      <View style={styles.blueSvgWrapper}>
        <BlueSvg />
      </View>
      <View style={styles.dotSvgWrapper}>
        <DotsSvg />
      </View>
      <View style={styles.orangeSvgWrapper}>
        <OrangeSvg />
      </View>
      {/* Main Content */}

      <Animated.FlatList
        data={onBoardData}
        keyExtractor={(item, index) => item.key}
        renderItem={renderSplash}
        horizontal
        scrollEventThrottle={32}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
          { useNativeDriver: false }
        )}
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        {/* 新增滑动结束回调 */}
        onMomentumScrollEnd={(e) => {
          const offsetX = e.nativeEvent.contentOffset.x;
          const pageIndex = Math.round(offsetX / screenWidth);
          setCurrentPage(pageIndex);
        }}
      />

      <Indicator scrollX={scrollX} />
      {/* 用currentPage判断按钮显示 */}
      {currentPage < 2 ? (
        <TouchableOpacity style={styles.skipWrapper} >
          <Text style={styles.skipText}>Skip</Text>
        </TouchableOpacity>
      ) : (
        {/* 第三页显示的其他按钮 */}
        <TouchableOpacity style={styles.startWrapper} >
          <Text style={styles.startText}>立即进入</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

方案2：监听scrollX实时更新（适合滚动过程中需要实时切换的场景） #

如果需要在滑动到一半时就提前切换按钮，可以给scrollX添加监听器实时计算页码，注意组件卸载时要移除监听器避免内存泄漏：

useEffect(() => {
  // 监听scrollX值变化
  const listenerId = scrollX.addListener(({ value }) => {
    const pageIndex = Math.round(value / screenWidth);
    if (pageIndex !== currentPage) {
      setCurrentPage(pageIndex);
    }
  });
  // 组件卸载时移除监听器
  return () => scrollX.removeListener(listenerId);
}, [scrollX, currentPage, screenWidth]);

注意：如果你的引导页item不是满屏宽度，计算pageIndex时要替换为实际单个item的宽度。

内容的提问来源于stack exchange，提问作者Adil Ijaz