使用NavigationContainer出现Reanimated valueUnpacker错误求助

错误原因分析 #

你遇到的两个错误本质是依赖缺失或配置问题：

• [Reanimated] valueUnpacker is not a worklet：Reanimated需要通过babel插件转译worklet代码，未配置插件会导致该错误。
• Invariant Violation：抽屉导航依赖react-native-gesture-handler和react-native-reanimated，缺失或未正确初始化这些依赖会触发该异常。

分步解决方案 #

1. 安装必要依赖 #

抽屉导航依赖手势处理器和动画库，执行以下命令安装：

# npm 安装
npm install react-native-gesture-handler react-native-reanimated

# 或 yarn 安装
yarn add react-native-gesture-handler react-native-reanimated

2. 配置Reanimated Babel插件 #

在项目根目录的babel.config.js中添加Reanimated插件，注意插件必须放在最后一项：

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

3. 重置缓存并重启服务 #

关闭当前运行的Metro Bundler，执行以下命令清理缓存并重启：

npx react-native start --reset-cache

随后重新运行项目：

# Android
npx react-native run-android

# iOS
npx react-native run-ios

4. 修正代码中的初始化问题 #

在项目入口文件（如App.js或index.js）的最顶部导入手势处理器，确保它在React之前加载：

import 'react-native-gesture-handler';
import * as React from 'react';
// 其余代码保持不变...

修正后的完整代码 #

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

function HomeScreen({ navigation }) {
  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={() => navigation.navigate('Profile')}
      >
        <Text style={{ fontSize: 15, color: "white", textAlign: "center" }}>Go to Profiles</Text>
      </TouchableOpacity>
    </View>
  );
}

function ProfileScreen({ navigation }) {
  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={() => 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

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