React Native Expo EAS构建APK启动崩溃（疑似react-navigation导致）

我用EAS打包React Native应用成APK后启动就崩溃，但Expo打包完全正常。排查后发现只要使用react-navigation就会崩溃，已确认依赖齐全、Expo doctor无异常、构建全程无报错。通过logcat得到错误信息：RNGestureHandlerModule未找到，需确认该模块已在原生二进制中注册。

相关代码与配置 #

App.js代码 #

const themeColor1 = "#7CFC00";
const themeColor3 = "#394230";
const themeColor4 = "#141712";

import React from 'react';
import { View, Text} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';

import Page1 from './assets/screens/Page1.js';

const Drawer = createDrawerNavigator();

export default function App() {
    return (
    <NavigationContainer>
      <Drawer.Navigator 
        initialRouteName="Page1"
        drawerContent={(props) => (
          <SafeAreaView style={{ flex: 1 }}>
            <View
              style={{
                height: 180,
                width: '100%',
                justifyContent: 'center',
                borderBottomColor: themeColor1,
                inactiveTintColor: themeColor1,
                borderBottomWidth: 0.5,
                marginLeft: 0,
                alignItems: 'center',
                textAlign: 'center',
              }}>
              <Text
                style={{
                  fontSize: 30,
                  marginVertical: 6,
                  justifyContent: 'space-evenly',
                  color: themeColor1,
                  textAlign: 'center', 
                }}>
                App that crashes
                on startup 
              </Text>
            </View>
            <DrawerItemList {...props} />
          </SafeAreaView>
        )}

        screenOptions={{
          drawerStyle: {
            backgroundColor: themeColor4,
            width: 250,
          },
          headerStyle: {
            backgroundColor: themeColor4,
          },
          
          headerTintColor: themeColor1,

          headerTitleStyle: {
          },

          drawerLabelStyle: {
            color: '#111',
          },

          headerTitle :{
            color: '#111',
          },
          drawerActiveBackgroundColor: themeColor3,         
        }}>
        <Drawer.Screen
          name="Page1"
          options={{
            title: 'Page1',
            drawerLabel: () => (<Text>Page1</Text>),
            drawerIcon: () => (<MaterialCommunityIcons name="file-document-edit" size={30} color={themeColor1}/>),
          }}
          component={Page1}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

app.json配置 #

{
  "expo": {
    "name": "App",
    "slug": "App",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.nicola.app"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "04e732f6-d275-463b-b775-45ca301b9be1"
      }
    },
    "runtimeVersion": {
      "policy": "appVersion"
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]
  }
}

eas.json配置 #

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

logcat日志 #

AndroidRuntime: com.facebook.react.common.JavascriptException: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGestureHandlerModule' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["HeadlessJsTaskSupport","PlatformConstants","SourceCode","DeviceInfo","UIManager","DeviceEventManager","RNCSafeAreaContext","NativeAnimatedModule","SoundManager","I18nManager","Timing","ReanimatedModule","ImageLoader"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","NativeReactNativeFeatureFlagsCxx","FrameRateLogger","KeyboardObserver","RNGestureHandlerModule"]}

针对RNGestureHandlerModule未注册的问题，按以下步骤修复：

1. 校验依赖版本兼容性
   检查react-native-gesture-handler版本是否与当前Expo SDK、react-navigation版本匹配。执行命令查看版本：

   npm list react-native-gesture-handler
   

   若版本不兼容，安装适配当前Expo SDK的版本，例如Expo SDK 50对应~2.16.0版本：

   npm install react-native-gesture-handler@~2.16.0
   

2. 配置EAS构建插件
   修改app.json的plugins数组，添加react-native-gesture-handler插件，确保EAS构建时正确链接原生模块：

   "plugins": [
     [
       "expo-build-properties",
       {
         "android": {
           "usesCleartextTraffic": true
         }
       }
     ],
     "react-native-gesture-handler"
   ]
   

3. 添加GestureHandlerRootView包裹根组件
   在App.js最外层用GestureHandlerRootView包裹导航容器，确保手势处理模块初始化：

   // 导入GestureHandlerRootView
   import { GestureHandlerRootView } from 'react-native-gesture-handler';
   
   export default function App() {
       return (
       <GestureHandlerRootView style={{ flex: 1 }}>
         <NavigationContainer>
           {/* 原导航内容 */}
         </NavigationContainer>
       </GestureHandlerRootView>
     );
   }
   

4. 清理缓存并重新构建
   清理Expo和npm缓存后，重新执行EAS构建：

   npx expo prebuild --clean
   npm cache clean --force
   npx eas build --platform android --profile preview
   

5. 检查构建日志
   重新构建时查看日志，确认react-native-gesture-handler是否被正确链接到原生项目，若有警告或错误及时处理。

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