React Navigation点击屏幕跳转按钮应用闪退无报错问题咨询

• 运行环境：Android系统、Genymotion模拟器
• 异常触发场景：点击页面切换按钮
• 异常表现：应用直接退出闪退，控制台无任何错误信息输出
• 已排除项：
  • 项目相关依赖不存在版本兼容问题
  • 按钮绑定的点击事件函数可正常触发执行

Router.js #

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import First from "./First";
import Second from "./Second";
const Stack = createNativeStackNavigator();

const Router = () =>{
    return(
        <NavigationContainer>
            <Stack.Navigator initialRouteName="First">
                <Stack.Screen name="First" component={ First }/>
                <Stack.Screen name="Second" component={ Second }/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default Router;

First.js #

import React from 'react';
import {View,Text,Button} from 'react-native';


const First = ( props ) =>{
    const gotoSecond = () => {
        console.log("First");
        props.navigation.navigate("Second");
        console.log("second")
    }
    return (
        <View>
            <Text>Hello First Page!</Text>
            <Button title="Go SecondPage!" onPress={gotoSecond}/>
        </View>
    );

};

export default First;

Second.js #

import React from 'react';
import {View,Text} from 'react-native';

const Second = () =>{
    return (
        <View>
            <Text>Hello Second Page!</Text>
        </View>
    );

};

export default Second;

代码逻辑本身没有问题，闪退是Genymotion模拟器和React Navigation依赖的底层原生库react-native-screens的兼容问题导致的。
react-native-screens默认启用原生硬件加速渲染优化，和x86架构Genymotion模拟器的OpenGL硬件渲染实现存在冲突，页面切换触发新屏幕渲染时直接在Native层崩溃，这类原生层崩溃不会被JS层捕获，所以控制台不会输出任何错误日志。代码里navigate调用前后的console.log都能正常打印，也能佐证JS逻辑执行正常，崩溃发生在JS逻辑执行完之后的原生渲染阶段。

三选一即可：

• 最快修复方案：在项目入口文件（一般是index.js或者App.js）的最顶部加入以下配置，关闭screens的硬件加速优化即可，该配置仅影响调试表现，不会对真机上线版本造成副作用：

  import { enableScreens } from 'react-native-screens';
  enableScreens(false);
  

  加完之后重新reload应用就能正常跳转。
• 环境替换方案：不用Genymotion，换成Android Studio官方模拟器或者直接连Android真机调试，不需要改任何代码就能正常运行。
• 模拟器设置调整：打开Genymotion对应模拟器的配置页，把OpenGL渲染模式从硬件加速改成软件渲染，重启模拟器后重试，缺点是模拟器整体渲染流畅度会明显降低。

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