@gorhom/bottom-sheet模态框在Android APK中无法打开问题排查

问题 #

在基于Expo的React Native项目中使用@gorhom/bottom-sheet实现点击按钮打开底部模态框功能，expo start调试时iOS和Android端均正常（点击按钮模态框弹出，下滑可关闭），但打包为签名APK安装到Android手机后，模态框完全不显示，无任何报错信息。

已配置的依赖版本：

• @gorhom/bottom-sheet: ^4.4.7
• react-native: ^0.72.4
• react-native-gesture-handler: ^2.12.1
• react-native-reanimated: ~3.3.0
• react-native-safe-area-context: 4.6.3
• expo: ^49.0.8

项目代码：

import { BottomSheetModalProvider, BottomSheetModal } from '@gorhom/bottom-sheet';
import { Button } from '@rneui/themed';
import { useRef, useCallback, useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
    const bottomSheetModalRef = useRef(null);
    const snapPoints = useMemo(() => ['50%'], []);

    const handlePresentModalPress = useCallback(() => {
        bottomSheetModalRef.current?.present();
    }, []);

    const handleSheetChanges = useCallback((index) => {
        console.log('handleSheetChanges', index);
    }, []);

    // renders
    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <BottomSheetModalProvider>
                <View style={styles.container}>
                    <Button
                        onPress={handlePresentModalPress}
                        title="Present Modal"
                        color="black"
                    />
                    <BottomSheetModal
                        ref={bottomSheetModalRef}
                        index={0}
                        snapPoints={snapPoints}
                        onChange={handleSheetChanges}
                    >
                        <View style={styles.contentContainer}>
                            <Text>Awesome 🎉</Text>
                        </View>
                    </BottomSheetModal>
                </View>
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        justifyContent: 'center',
        backgroundColor: 'grey',
    },
    contentContainer: {
        flex: 1,
        alignItems: 'center',
    },
});

可能的原因及解决办法 #

• React Native Reanimated 打包配置缺失
  Reanimated在生产打包时必须添加专属Babel插件，否则动画相关功能会失效。检查babel.config.js，确保插件已添加且位于最后：

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

• Gesture Handler 初始化顺序错误
  生产环境下需确保Gesture Handler的初始化代码在所有模块之前执行。在项目入口文件最顶部添加：

  import 'react-native-gesture-handler';
  

• ProGuard 混淆误删核心代码
  Android签名打包时ProGuard会混淆代码，可能移除了@gorhom/bottom-sheet、Reanimated或Gesture Handler的核心逻辑。在android/app/proguard-rules.pro中添加以下规则：

  # React Native Reanimated
  -keep class com.swmansion.reanimated.** { *; }
  -keep class com.facebook.react.turbomodule.** { *; }
  
  # React Native Gesture Handler
  -keep class com.swmansion.gesturehandler.** { *; }
  
  # Gorhom Bottom Sheet
  -keep class com.gorhom.bottomsheet.** { *; }
  

• Expo 打包缓存异常
  旧缓存可能导致打包时引入无效代码，执行以下命令清理缓存后重新打包：

  expo r -c
  expo build:android -t apk --clear-cache
  

• SnapPoints 单位兼容性问题
  部分设备生产环境下对百分比单位解析异常，可尝试将snapPoints改为具体数值测试：

  const snapPoints = useMemo(() => [300], []);
  

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