React Native Android应用使用react-native-gesture-handler时点击输入组件意外崩溃

问题详情 #

我开发的React Native应用在iOS上运行完全正常，但在Android平台点击输入组件时会意外闪退，且构建过程无任何报错。经排查，问题与GestureHandlerRootView直接相关：

• 保留GestureHandlerRootView包裹App时，Android点击输入组件就闪退；
• 注释掉该组件后，App可正常运行，但会触发错误提示：NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView

应用使用的核心依赖版本：

• react-native: 0.73.11
• react-native-gesture-handler: 2.21.0
• react-native-screens: 4.1.0

App.tsx核心代码

const App: React.FC<AppProps> = (props) => (
  <GestureHandlerRootView style={styles.gestureHandlerRoot}>
    <SafeAreaProvider>
      <AppContent {...props} />
    </SafeAreaProvider>
  </GestureHandlerRootView>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  gestureHandlerRoot: {
    flex: 1,
  },
});

MainActivity.java代码

package com.testapp;

import com.facebook.react.ReactActivity;
import android.view.WindowManager;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "TestApp";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  }
}

已尝试的解决方案（均无效） #

• 降级react-native-gesture-handler至2.20.0、2.19.0版本；
• 修改MainActivity.java中super.onCreate(savedInstanceState)为super.onCreate(null)；
• 在项目入口index文件中显式导入react-native-gesture-handler；
• 多次执行./gradlew clean清理构建缓存；
• 确认TouchableOpacity等交互组件的导入来源为react-native。

推荐排查与解决方向 #

1. 配置Android原生层的Gesture Handler根视图
   对于React Native 0.70+版本，官方推荐通过MainActivity的createReactActivityDelegate方法指定手势处理根视图，修改MainActivity.java如下：

   package com.testapp;
   
   import com.facebook.react.ReactActivity;
   import com.facebook.react.ReactActivityDelegate;
   import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
   import com.facebook.react.defaults.DefaultReactActivityDelegate;
   import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
   
   public class MainActivity extends ReactActivity {
     @Override
     protected String getMainComponentName() {
       return "TestApp";
     }
   
     @Override
     protected ReactActivityDelegate createReactActivityDelegate() {
       return new DefaultReactActivityDelegate(
           this,
           getMainComponentName(),
           DefaultNewArchitectureEntryPoint.getFabricEnabled()
       ) {
         @Override
         protected RNGestureHandlerEnabledRootView createRootView() {
           return new RNGestureHandlerEnabledRootView(MainActivity.this);
         }
       };
     }
   
     @Override
     protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
     }
   }
   

2. 调整GestureHandlerRootView的嵌套层级
   尝试将SafeAreaProvider与GestureHandlerRootView的嵌套顺序调换，测试是否能规避冲突：

   const App: React.FC<AppProps> = (props) => (
     <SafeAreaProvider>
       <GestureHandlerRootView style={styles.gestureHandlerRoot}>
         <AppContent {...props} />
       </GestureHandlerRootView>
     </SafeAreaProvider>
   );
   

3. 获取Android崩溃日志定位根源
   执行adb logcat *:E命令抓取Android设备的错误日志，闪退的具体栈信息会明确指出崩溃原因（如原生模块冲突、内存异常等），这是精准解决问题的关键步骤。

4. 测试原生TextInput组件
   替换应用中的自定义输入组件为React Native原生TextInput，排查是否是第三方输入组件与手势处理库的交互冲突导致闪退。

内容来源于stack exchange