react-native-reanimated-carousel渲染时value读取警告问题排查与解决

问题描述 #

使用react-native-reanimated-carousel时触发如下警告：

[Reanimated] Reading from value during component render. Please ensure that you do not access the value property or use get method of a shared value while React is rendering a component.

使用的示例代码如下：

import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                data={[...new Array(6).keys()]}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={({ index }) => (
                    <View
                        style={{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={{ textAlign: 'center', fontSize: 30 }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

export default Index;

警告产生的原因 #

这个警告来自Reanimated库的严格模式检查，核心原因是组件渲染阶段直接读取了Reanimated共享值（Shared Value）的value属性或调用了get()方法。

在react-native-reanimated-carousel的内部实现中，可能存在在组件render周期里访问共享值的逻辑——比如获取当前轮播索引、滚动状态等共享值时，没有通过Reanimated提供的useAnimatedStyle、useDerivedValue或动画回调等安全方式，而是直接在render阶段读取了共享值的原始值，这违反了Reanimated的设计规范：共享值的读取应该限制在UI线程的动画上下文或非渲染阶段。

可行的解决办法 #

1. 更新react-native-reanimated-carousel到最新版本 #

这个问题大概率是库的内部实现缺陷，后续版本可能已经修复了在render阶段读取共享值的问题。执行以下命令更新：

npm install react-native-reanimated-carousel@latest
# 或者使用yarn
yarn add react-native-reanimated-carousel@latest

2. 临时关闭Reanimated的严格模式检查 #

如果暂时无法更新库，可以通过修改Reanimated的配置来关闭这个警告，但不推荐长期使用，因为严格模式是为了避免潜在的性能问题和渲染不一致：
在项目的babel.config.js中添加Reanimated的配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        relativeSourceLocation: true,
        disableStrictModeCheck: true, // 关闭严格模式检查
      },
    ],
  ],
};

修改后需要重启Metro服务。

3. 调整自定义逻辑的状态读取方式 #

如果你的代码中存在自行读取轮播内部状态的逻辑，确保将这些操作移到安全上下文：

• 不要在render函数中直接获取carouselRef.current.currentIndex这类基于共享值的属性
• 改用onSnapToItem回调获取当前索引并保存到React状态中，再在render中使用这个状态值

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