错误：[重新动画] `valueUnpacker` 不是工作集，js 引擎：hermes 和 Invariant Vilation

Question

当我尝试使用 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

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

Answer 1

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

Answer 2

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

1. npm 安装react-native-reanimated
2. 添加Reanimated的babel插件 将react-native-reanimated/plugin插件添加到你的babel.config.js中。

模块.导出= { 预设：[ ... // 不要在这里添加它:) ], 插件：[ ... 'react-native-reanimated/插件', ], };

3. npm start ---重置缓存
4. 对于ios， cd ios && pod install && cd ..
5. 最后，再次构建应用程序。