使用react-native-reanimated-carousel遇TypeError问题求助

我是一名初级开发者，在使用react-native-reanimated-carousel组件时，每次运行代码都会触发如下TypeError错误：TypeError: undefined is not an object (evaluating 'worklet.__workletHash.toString')，目前未能找到相关解决方案。以下是我的代码及完整错误栈信息：

import { StyleSheet, Text, View,TouchableOpacity ,SafeAreaView, ImageBackground, Platform, ScrollView, TextInput} from 'react-native';
import { useFonts } from 'expo-font';
import Feather from 'react-native-vector-icons/Feather';
import Carousel from 'react-native-reanimated-carousel';
import { sliderData } from '../../model/data.js';
import BannerSlider from '../BannerSlider';
import { windowWidth } from '../../utils/Dimensions.js';

const Home = ({navigation}) =>{
    const renderBanner = ({item,index})=>{
        return(
            <BannerSlider data={item}/>
        )
    }
    const [isLloaded] = useFonts({
        'Roboto-Medium': require('../../assets/fonts/Roboto-Medium.ttf')
    })

    if(!isLloaded){
        return null
    }
    return(
        <SafeAreaView style={styles.container}>
            <ScrollView  style={{padding:20}}>     
                <View style={{flexDirection:'row',justifyContent:'space-between',marginBottom:20}}>
                    <Text style={{fontSize:16,fontWeight:'bold', fontFamily:'Roboto-Medium'}}>Hello , Edrine</Text>
                    <ImageBackground source={require('../../assets/images/user-profile.jpg')} style={{width:35,height:35,}} imageStyle={{borderRadius:25}}/>
                 </View>   
                 <View style={{
                    flex:1,
                    flexDirection:'row'
                    ,alignItems:'center',
                    borderColor:'#c6c6c6',
                    borderWidth:1 ,
                    borderRadius:5,
                    paddingHorizontal:10,
                    paddingVertical:8,
                    
                }}>
                    <Feather name="search" size={20} color='#c9c9c9' style={{marginRight:5}}/>
                    <TextInput placeholder='Search' style={{flex:1}}/>
                </View>  
                <View style={{flexDirection:'row',alignItems:'center', justifyContent:'space-between',marginVertical:15}}>
                    <Text style={{fontSize:16,fontWeight:'bold'}}>Upcoming Games</Text>
                    <TouchableOpacity >
                        <Text style={{color:'#0aada8'}}>See All</Text>
                    </TouchableOpacity>
                </View>       
            
                    <Carousel
                    key={(item)=>item.id}
                    loop
                    width={windowWidth}
                    height={windowWidth / 2}
                    autoPlay={true}
                    data={sliderData}
                    onSnapToItem={(index) => console.log('current index:', index)}
                    scrollAnimationDuration={1000}
                    renderItem={()=>(<renderBanner/>)}
                    />
           
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:"#fff",
      paddingTop:Platform.OS==='android' ? 20 : 0,
    }
})

export default Home

完整错误栈：

TypeError: undefined is not an object (evaluating'worklet.__workletHash.toString')

This error is located at:
    in IScrollViewGesture
    in Unknown (created by Home)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by Home)
    in RCTView (created by View)
    in View
    in SafeAreaView (created by Home)
    in Home (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

问题修复方案 #

1. 修正renderItem的错误写法 #

你的Carousel组件renderItem属性写法有误：

• 小写的<renderBanner/>不符合React组件命名规范，会被识别为普通HTML标签而非自定义组件
• 没有传递Carousel提供的item和index参数

修改为直接传递renderBanner函数：

<Carousel
  key={(item)=>item.id}
  loop
  width={windowWidth}
  height={windowWidth / 2}
  autoPlay={true}
  data={sliderData}
  onSnapToItem={(index) => console.log('current index:', index)}
  scrollAnimationDuration={1000}
  renderItem={renderBanner} // 此处修改
/>

或者直接内联写法：

renderItem={({item}) => <BannerSlider data={item}/>}

2. 检查依赖版本兼容性 #

确保react-native-reanimated与react-native-reanimated-carousel版本匹配：

• 运行npm list react-native-reanimated react-native-reanimated-carousel查看版本
• 若版本不兼容，升级或降级其中一个包（比如Reanimated 2.x对应Carousel的旧版本，Reanimated 3.x需使用支持该版本的Carousel）

3. 确认Reanimated的Babel配置 #

在项目根目录的babel.config.js中，确保Reanimated插件配置正确且位于最后：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

4. 清除缓存重启项目 #

修改配置后执行缓存清除：

• React Native项目：npx react-native start --reset-cache
• Expo项目：expo start --clear
  之后重新运行项目即可。

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