React Native Expo Android从组件跳转至SimilarMovieScreen时崩溃

一、先获取崩溃根源：导出Android日志 #

Android无提示崩溃时，必须拿到错误日志才能精准定位：

• 把设备连接到电脑，打开终端执行命令：adb logcat *:E
• 触发崩溃操作，终端会输出错误堆栈，重点查看AndroidRuntime开头的报错信息，这是崩溃的核心原因。

二、常见问题及修复方案 #

1. 目标屏幕SimilarMovieScreen存在代码错误 #

跳转崩溃90%以上是目标组件的问题，比如：

• 直接使用props.route.params但跳转时未传参，导致undefined报错
• 原生组件（如视频播放器、第三方UI组件）初始化失败
• 大量同步渲染或内存泄漏导致ANR（应用无响应）

修复：
先替换SimilarMovieScreen为极简测试组件，验证是否还崩溃：

const SimilarMovieScreen = () => {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>测试页面</Text>
    </View>
  );
};

如果测试页面正常，说明原SimilarMovieScreen存在问题，逐行排查其数据请求、组件渲染、原生模块相关代码。

2. 轮播组件中data对象的空值隐患 #

当前代码中data.poster_path可能为undefined，拼接后会生成无效URL，虽然图片加载失败一般不会崩溃，但Android某些场景下可能触发异常：
修复：
优化图片URL拼接逻辑，增加空值判断：

source={{
  uri: data.poster_path ? `https://image.tmdb.org/t/p/w500${data.poster_path}` : '',
}}

同时给Image添加错误处理：

<Image
  source={{
    uri: data.poster_path ? `https://image.tmdb.org/t/p/w500${data.poster_path}` : '',
  }}
  style={styles.imgStyle}
  onError={(e) => console.log('图片加载失败', e)}
/>

3. 导航上下文获取异常 #

若轮播组件嵌套在第三方库内部组件中，useNavigation可能无法正确获取导航对象：
修复：
通过props传递导航对象，替代子组件内的useNavigation：

// 在PlayScreen中调用SimilarSliderImage时：
<SimilarSliderImage data={item} navigation={navigation} />

// 修改SimilarSliderImage组件：
const SimilarSliderImage = ({data, navigation }) => {
  return (
    <View>
      <TouchableOpacity
        onPress={() => navigation.navigate("SimilarMovieScreen")}>
        {/* 图片代码 */}
      </TouchableOpacity>
    </View>
  );
};

4. 导航栈配置校验 #

确认Stack导航器配置无错误：

• 检查SimilarMovieScreen组件是否已正确导入到导航器所在文件
• 确保navigate调用的屏幕名称"SimilarMovieScreen"和导航器配置中的名称完全一致（大小写、拼写均需匹配）

三、额外排查点 #

• 如果PlayScreen使用了视频播放组件，跳转前务必暂停或销毁视频实例，避免原生层资源冲突导致崩溃
• 检查AndroidManifest.xml中是否缺失必要权限（如网络权限），不过这类问题一般不会直接引发跳转崩溃

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