集成react-native-bottom-sheet后添加GestureHandlerRootView致RN应用白屏

在集成@gorhom/bottom-sheet库时，按照官方要求导入并使用GestureHandlerRootView包裹应用后，React Native（Expo环境）出现空白白屏问题，相关代码及依赖配置如下：

现有App.js代码 #

import "react-native-gesture-handler";
import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import AppNavigator from './navigation/AppNavigator';
import store from './store';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { GestureHandlerRootView } from 'react-native-gesture-handler'; // Import GestureHandlerRootView

export default function App() {
  useEffect(() => {
    // Check for the presence of a stored authentication token
    const checkToken = async () => {
      try {
        const token = await AsyncStorage.getItem('authToken');

        if (token) {
          // Token exists, user is logged in
          // You can perform any additional checks/validation here
          // For example, you can decode the token to get user data.
          // Dispatch a login action here if needed.
        }
      } catch (error) {
        console.error('Error reading token:', error);
      }
    };

    checkToken();
  }, []);

  return (
    <Provider store={store}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        {/* Wrap your entire app with GestureHandlerRootView */}
        <AppNavigator />
      </GestureHandlerRootView>
    </Provider>
  );
}

package.json依赖配置 #

{
  "name": "appname",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@gorhom/bottom-sheet": "^4.4.8",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "expo": "~49.0.8",
    "expo-auth-session": "~5.0.2",
    "expo-constants": "^14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-random": "~13.2.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-web-browser": "~12.3.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-modal-sheet": "^2.0.0",
    "react-native": "0.72.4",
    "react-native-animatable": "^1.3.3",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-international-phone-number": "^0.4.14",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-screens": "^3.25.0",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tailwindcss": "^1.1.11",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "twrnc": "^3.6.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

解决思路与方案 #

1. 调整GestureHandlerRootView层级

将GestureHandlerRootView调整为最外层容器，包裹Redux Provider，避免层级冲突导致渲染异常：

return (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  </GestureHandlerRootView>
);

2. 确保手势库优先初始化

确认import "react-native-gesture-handler";是App.js的第一行导入，必须放在所有其他import之前，保证手势系统优先加载。

3. 检查Reanimated配置

@gorhom/bottom-sheet依赖react-native-reanimated，需确保babel配置中添加对应插件，且放在最后一项：

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

4. 清除缓存重启项目

执行命令彻底清除缓存并重启，解决依赖或配置变更后的缓存问题：

expo start --clear

5. 排查导航组件冲突

暂时将AppNavigator替换为简单测试组件，验证是否是导航内部导致的白屏：

<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
  <Text>测试页面</Text>
</View>

若测试组件正常显示，需检查导航配置中是否存在手势相关的冲突设置。

6. 验证依赖兼容性

尝试更新到最新兼容版本，修复版本匹配问题：

npm install @gorhom/bottom-sheet@latest react-native-gesture-handler@latest react-native-reanimated@latest

更新后记得清除缓存重启项目。

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