React Native：解决重新渲染后ScrollView滚动位置重置问题

核心问题分析 #

点击“加入购物车”或其他页面更新购物车状态时，全局重渲染触发了KeyboardAwareScrollView滚动位置重置，且之前的滚动位置保存方案因重绘时机问题失效。

具体解决步骤 #

1. 废弃“传递渲染函数到其他页面”的方案

不要将当前屏幕的渲染函数传给购物车页面，改用**状态管理工具（Context/Redux）**共享购物车状态：

• 购物车页面只负责更新全局购物车状态
• 当前商品页面监听状态变化，仅触发局部组件重绘，而非整个页面刷新

2. 手动持久化并恢复ScrollView滚动位置

用useRef保存ScrollView实例，结合滚动事件记录位置，在状态更新后手动恢复：

import { useRef, useEffect, useState } from 'react';
import { KeyboardAwareScrollView, FlatList, View, Button } from 'react-native';

const ProductScreen = () => {
  const scrollViewRef = useRef(null);
  const [scrollY, setScrollY] = useState(0);
  // 假设从Context获取购物车状态
  const [cartItems, setCartItems] = useState({});

  // 实时记录滚动位置
  const handleScroll = (e) => {
    setScrollY(e.nativeEvent.contentOffset.y);
  };

  // 购物车状态更新后，恢复滚动位置
  useEffect(() => {
    if (scrollViewRef.current && scrollY !== 0) {
      scrollViewRef.current.scrollTo({ y: scrollY, animated: false });
    }
  }, [cartItems]);

  return (
    <KeyboardAwareScrollView
      ref={scrollViewRef}
      keyboardShouldPersistTaps="always"
      onScroll={handleScroll}
      scrollEventThrottle={16} // 确保滚动事件及时触发
    >
      {/* 嵌套的FlatList */}
      <FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={products}
        keyExtractor={item => item.id}
        extraData={cartItems} // 仅依赖购物车状态触发重绘
        renderItem={({ item }) => (
          <ProductCard item={item} cartItems={cartItems} updateCart={setCartItems} />
        )}
      />
    </KeyboardAwareScrollView>
  );
};

3. 优化FlatList子组件重绘

用React.memo包裹商品卡片组件，仅当商品数据或对应购物车状态变化时才重绘：

const ProductCard = React.memo(({ item, cartItems, updateCart }) => {
  const handleAddToCart = () => {
    updateCart(prev => ({
      ...prev,
      [item.id]: (prev[item.id] || 0) + 1
    }));
  };

  return (
    <View style={{ width: 200, padding: 10, borderWidth: 1 }}>
      {/* 商品展示内容 */}
      <Button 
        title={`加入购物车${cartItems[item.id] ? `(${cartItems[item.id]})` : ''}`}
        onPress={handleAddToCart}
      />
    </View>
  );
});

4. 规避KeyboardAwareScrollView的自动重置行为

若上述方案仍有问题，可添加以下属性限制组件自动重置：

<KeyboardAwareScrollView
  // ...其他属性
  resetScrollToCoords={{ x: 0, y: 0 }}
  enableOnAndroid={false} // 部分Android版本的兼容性优化
/>

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