Expo生产环境卡在闪屏：withnavigation与gorhom/bottom-sheet问题求助

问题描述 #

开发环境运行正常，但生产构建后应用卡在闪屏。通过执行expo start --no-dev --minify模拟生产模式，定位到withNavigation（含withNavigationFocus）与@gorhom/bottom-sheet是问题诱因。

环境依赖详情 #

"expo": "^45.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"react-native": "0.68.2",
"react-native-reanimated": "~2.8.0",
"react-native-gesture-handler": "~2.2.1",
"@gorhom/bottom-sheet": "^3.0.0",
"react-navigation": "^4.4.4",

相关代码实现 #

Bottom Sheet Modal 代码 #

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

const handleSheetChanges = useCallback((index) => {
  console.log("handleSheetChanges", index);
}, []);
const snap = Platform.OS == "ios" ? "34%" : "36%";
const snapPoints = useMemo(() => [snap, snap], []);


const renderBottomSheet = () => {
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      index={1}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
    >
      <View style={Styles.sheetWrapper}>
        <TouchableOpacity
          onPress={() => {
            // handleActionButtonNavigation("CollabPage");
            handleActionButtonNavigation("AddParticipants");
          }}
        >
          <View style={[Styles.sheetTab, { marginTop: 0 }]}>
            <View
              style={[
                Styles.iconContainer,
                { backgroundColor: COLORS.primaryTeal500 },
              ]}
            >
              <SvgUri
                svgXmlData={SVGS.CHEVRON_UP_DOWN}
                width={RFValue(24, 844)}
                height={RFValue(24, 844)}
              />
            </View>
            <Text style={[Styles.sheetText, { color: COLORS.monoBlack700 }]}>
              Start a Project
            </Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            handleActionButtonNavigation("OppurtunityPage");
          }}
        >
          <View style={Styles.sheetTab}>
            <View
              style={[
                Styles.iconContainer,
                { backgroundColor: COLORS.teritiaryWarning },
              ]}
            >
              <SvgUri
                svgXmlData={SVGS.WHITE_BRIEFCASE}
                width={RFValue(24, 844)}
                height={RFValue(24, 844)}
              />
            </View>
            <Text style={Styles.sheetText}>Create Opportunity</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            handleActionButtonNavigation("FolioPage");
          }}
        >
          <View style={Styles.sheetTab}>
            <View
              style={[
                Styles.iconContainer,
                { backgroundColor: COLORS.teritiaryPurple },
              ]}
            >
              <SvgUri
                svgXmlData={SVGS.WHITE_OPEN_FOLDER}
                width={RFValue(24, 844)}
                height={RFValue(24, 844)}
              />
            </View>
            <Text style={Styles.sheetText}>Create Folio</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            handleActionButtonNavigation("SavedDrafts");
          }}
        >
          <View style={Styles.sheetTab}>
            <View
              style={[
                Styles.iconContainer,
                { backgroundColor: COLORS.primaryTeal400 },
              ]}
            >
              <SvgUri
                svgXmlData={SVGS.WHITE_DRAFT}
                width={RFValue(24, 844)}
                height={RFValue(24, 844)}
              />
            </View>
            <Text style={Styles.sheetText}>Saved Drafts</Text>
          </View>
        </TouchableOpacity>
      </View>
    </BottomSheetModal>
  );
};

withNavigation 相关代码 #

1. withNavigationFocus 使用

import { withNavigationFocus } from "react-navigation";


export default connect(
 mapStateToProps,
 mapDispatchToProps
)(withNavigationFocus(Discover));

2. withNavigation 使用

import { withNavigation } from "react-navigation";
export default withNavigation(BottomNavBar);

问题判断 #

排除语法错误 #

开发环境能正常运行，说明代码不存在语法错误——语法错误在开发阶段会被即时捕获，不会仅在生产压缩后触发卡死。

核心原因：包兼容性/压缩冲突 #

问题大概率由版本兼容性或生产压缩时的代码逻辑冲突导致，具体可能的点：

1. @gorhom/bottom-sheet v3.x 与 react-navigation v4 适配性不足：该版本的bottom-sheet主要适配React Navigation v5+的API，而v4版本的react-navigation在导航上下文传递、生命周期处理上与v5+差异较大，生产压缩时这些差异会触发底层逻辑异常。
2. 动画库与导航高阶组件冲突：@gorhom/bottom-sheet依赖react-native-reanimated v2.x，而react-navigation v4的withNavigation高阶组件在生产压缩时，可能会干扰reanimated的JS-原生线程通信机制，导致UI线程阻塞。
3. 重复snapPoints值引发的内部逻辑异常：你的snapPoints设置了两个完全相同的百分比值，开发环境中框架容错性较高，但生产压缩时可能触发bottom-sheet内部的位置计算逻辑卡死。

验证方向 #

• 临时移除withNavigation/withNavigationFocus，改用react-navigation v4的navigation prop直接传递，测试生产模式是否正常。
• 尝试将@gorhom/bottom-sheet降级到v2.x（适配react-navigation v4的版本），或升级react-navigation到v5+。
• 修改snapPoints为不同的值（例如["0%", snap]），避免重复值可能引发的逻辑问题。

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