Expo项目中React Native Reanimated Carousel报toString读取错误

排查与修复步骤 #

1. 确认Reanimated的Babel配置 #

Expo项目中必须正确配置react-native-reanimated的Babel插件，否则会导致原生模块初始化异常：

• 打开项目根目录的babel.config.js，确保react-native-reanimated/plugin被添加到插件数组，且位于最后一位：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // 其他插件放在前面
      'react-native-reanimated/plugin',
    ],
  };
};

• 修改完成后，执行npx expo start --clear清除Metro缓存并重启服务。

2. 修复版本兼容性问题 #

当前依赖版本存在适配风险，建议升级到兼容的稳定版本：

• 升级react-native-reanimated：

npx expo install react-native-reanimated@^3.3.0

• 同步升级react-native-gesture-handler：

npx expo install react-native-gesture-handler@^2.12.0

3. 检查入口文件的Gesture Handler导入 #

确保在项目入口文件（如App.js）的最顶部导入react-native-gesture-handler，不能放在其他React/React Native导入之后：

import 'react-native-gesture-handler';
// 其他导入语句
import * as React from 'react';

4. 临时禁用Loop属性测试 #

部分版本中loop属性在Expo环境下存在初始化bug，可先移除该属性验证：

<Carousel
  // 暂时注释loop属性
  // 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>
  )}
/>

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