React Native Reanimated渲染大数据列表时崩溃的排查与优化

针对你遇到的「大数据FlatList添加Reanimated手风琴动画后出现渲染慢警告、崩溃，折叠卡顿」问题，结合你已用memo优化的前提，给出以下针对性优化策略：

1. 合并动画状态，减少SharedValue开销 #

你当前维护了4个独立的SharedValue，每个都触发单独的动画计算，这会增加Reanimated的工作负载。将所有动画状态合并为一个expanded状态，通过插值计算所有动画值：

const ANIMATION_DURATION = 500
const MAX_TABLE_HEIGHT = 700
const SPIN_ROTATION = 180

function ListItem({ entry, intent }) {
  const { newColors, spacing } = useAppTheme()
  const isPreview = intent === 'preview'
  
  // 单个状态控制所有动画：0=折叠，1=展开
  const expanded = useSharedValue(isPreview ? 0 : 1)

  // 所有动画样式基于expanded插值计算
  const spinStyle = useAnimatedStyle(() => ({
    transform: [
      { rotate: `${expanded.value * SPIN_ROTATION}deg` }
    ],
  }))

  const heightStyle = useAnimatedStyle(() => ({
    maxHeight: interpolate(expanded.value, [0, 1], [0, MAX_TABLE_HEIGHT]),
    overflow: 'hidden' // 配合maxHeight实现裁剪
  }))

  const containerStyle = useAnimatedStyle(() => ({
    paddingVertical: interpolate(expanded.value, [0, 1], [0, spacing.default]),
    marginTop: interpolate(expanded.value, [0, 1], [0, spacing.default]),
  }))

  const onPressChevron = useCallback(() => {
    // 仅更新一次状态，所有动画自动联动
    expanded.value = withTiming(expanded.value === 0 ? 1 : 0, {
      duration: ANIMATION_DURATION,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    })
  }, [expanded])

  // ...其余代码
}

2. 替换maxHeight动画为精确height动画（关键优化） #

maxHeight动画会触发频繁的布局重计算（因为RN需要不断判断子元素是否超过maxHeight），性能消耗极高。先测量子容器的真实高度，再用height动画替代：

function ListItem({ entry, intent }) {
  // ...其他代码
  const containerRef = useAnimatedRef()
  const [contentHeight, setContentHeight] = useState(MAX_TABLE_HEIGHT)

  // 初始渲染时测量展开状态下的真实高度
  useEffect(() => {
    if (isPreview) return
    requestAnimationFrame(() => {
      measure(containerRef, (x, y, width, height) => {
        setContentHeight(height)
      })
    })
  }, [isPreview])

  // 用真实高度做height动画，替代maxHeight
  const heightStyle = useAnimatedStyle(() => ({
    height: interpolate(expanded.value, [0, 1], [0, contentHeight]),
    overflow: 'hidden'
  }))

  return (
    <Animated.View style={containerStyle}>
      <Animated.View
        ref={containerRef}
        style={[styles.container, heightStyle]}
      >
        {/* 子元素 */}
      </Animated.View>
      {/* 按钮 */}
    </Animated.View>
  )
}

3. 移除批量子元素的独立动画 #

你当前给每个DataRow都添加了paddingVertical动画，10个元素就会产生10个独立动画。将padding动画移到父容器，只做一次动画即可：

// 父容器添加paddingVertical动画，DataRow移除animatedStyle
<Animated.View style={[styles.container, heightStyle, containerStyle]}>
  {data.map(({ value, label }) =>
    value !== null ? (
      <DataRow
        key={label}
        label={label}
        value={value}
      />
    ) : null
  )}
</Animated.View>

// DataRow简化为普通组件（无需Animated.View）
const DataRow = memo(({ label, value }) => {
  const { newColors, spacing } = useAppTheme()
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Text style={styles.value}>{value}</Text>
    </View>
  )
})

4. 优化FlatList虚拟列表配置 #

针对大数据列表，调整FlatList参数减少渲染压力：

<FlatList
  data={yourLargeData}
  renderItem={({ item }) => <ListItem entry={item} intent={intent} />}
  keyExtractor={(item) => item.id}
  // 核心优化项
  removeClippedSubviews={true} // 销毁不可见区域的组件
  maxToRenderPerBatch={3} // 每次批量渲染的数量（减少单次渲染压力）
  windowSize={5} // 可视区域上下预渲染的数量（按需调整）
  initialNumToRender={8} // 初始渲染数量（避免一次性渲染过多）
  // 若手风琴折叠/展开高度相对固定，可添加getItemLayout进一步优化
  getItemLayout={(data, index) => ({
    length: expanded ? contentHeight + 60 : 60, // 折叠/展开时的固定高度
    offset: (expanded ? contentHeight + 60 : 60) * index,
    index,
  })}
/>

5. 组件重渲染拦截优化 #

你已用memo，但需确保props的引用稳定性：

// ListItem用memo包裹，并缓存内部静态数据
const ListItem = memo(({ entry, intent }) => {
  // ...其他代码

  // 缓存data数组，避免每次渲染重新创建
  const data = useMemo(() => [
    { label: '1', value: 'value: 1' },
    { label: '2', value: 'value: 2' },
    // ...其余元素
  ], [])

  // onPressChevron用useCallback缓存引用
  const onPressChevron = useCallback(() => {
    expanded.value = withTiming(expanded.value === 0 ? 1 : 0, {
      duration: ANIMATION_DURATION,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    })
  }, [expanded])

  // ...其余代码
})

额外注意事项 #

• 避免在useAnimatedStyle中重复调用withTiming：应将动画逻辑放在SharedValue的更新中，而非样式计算里
• 若使用Reanimated 3+，可尝试useAnimatedScrollHandler和Animated.FlatList进一步优化滚动与动画的联动
• 测试时开启RN开发者菜单的「Show Perf Monitor」，观察JS线程和UI线程的帧率变化，定位剩余性能瓶颈

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