错误:[Reanimated] 'valueUnpacker' 不是工作线程,js 引擎:hermes 和 Invariant Vilation

Error: [Reanimated] `valueUnpacker` is not a worklet, js engine: hermes and Invariant Vilation

提问人:Angel 提问时间:10/12/2023 更新时间:11/8/2023 访问量:295

问:

当我尝试使用 NavigationContainer 时,我收到 Reanimated valueUnpacker 错误,我尝试使用不同版本的 Drawer 和 Navigation,但得到相同的错误

// In App.js in a new project

import * as React from 'react';
import { View, Text,TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
//import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';


function HomeScreen(props: { navigation: { navigate: (arg0: string) => void; }; }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{fontSize:20,color:"black"}}>Home Screen</Text>
      <TouchableOpacity style={{marginTop:20,width:200,height:50,backgroundColor:"blue",padding:10,alignItems:"center",borderRadius:10}} onPress={()=> props.navigation.navigate('Profile')}>
            <Text style={{fontSize:15,color:"white",textAlign:"center"}}>Go to Profiles</Text>
        </TouchableOpacity>
    </View>
  );
}

function ProfileScreen(props: { navigation: { navigate: (arg0: string) => void; }; }) {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{fontSize:20,color:"black"}}>Profile Screen</Text>
        <TouchableOpacity style={{marginTop:20,width:200,height:50,backgroundColor:"blue",padding:10,alignItems:"center",borderRadius:10}} onPress={()=> props.navigation.navigate('Home')}>
            <Text style={{fontSize:15,color:"white",textAlign:"center"}}>Go to Home</Text>
        </TouchableOpacity>
      </View>
    );
  }


  const Drawer = createDrawerNavigator();

  function MyDrawer() {
    return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
      </NavigationContainer>
    );
  }

  export default MyDrawer

它应该有一个带有不同选项的导航菜单,但即使您尝试不同的版本,它仍然失败

Navigator 抽屉 TSX

评论


答:

0赞 chenyin151 10/24/2023 #1

我是这样解决的:我在 Android Studio 中打开了 React Native 项目的 android 目录,然后运行 ./gradlew clean,然后再次运行 ./gradlew build 命令来解决问题。如果这不起作用,您可以先尝试运行“将项目与 Gradle 文件同步”。

0赞 Natnael Guchima 11/6/2023 #2

以下步骤应该可以修复该错误

  1. npm install react-native-reanimated
  2. 添加 Reanimated 的 babel 插件 将 react-native-reanimated/plugin 插件添加到你的 babel.config.js 中。
module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ],
};
  1. npm start -- --reset-cache
  2. 对于 ios,cd ios && pod install && cd ..
  3. 最后,再次构建应用。

评论

0赞 Eric MORAND 11/7/2023
问题中没有提到巴别塔,所以我不确定你的答案是否真的回答了它。
0赞 Natnael Guchima 11/8/2023
我最近遇到了同样的错误。并尝试了我提到的相同步骤,它对我有用。我提到的步骤是 react-native-reanimated 官方文档中提到的安装步骤