Expo管理的React Native项目图标消失、Image Picker失效排查

问题描述 #

开发Expo管理的React Native项目时，接入expo-sqlite实现数据库功能后，突然出现两个异常：

1. 所有页面的图标全部消失
2. 原本正常工作的expo-image-picker无法打开相册选择图片

依赖配置（package.json） #

"dependencies": {
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/stack": "^6.3.29",
    "expo": "~50.0.14",
    "expo-image-picker": "~14.7.1",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-hook-form": "^7.51.2",
    "react-native": "0.73.6",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-swipe-list-view": "^3.2.9",
    "expo-sqlite": "~13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }

图片选择组件代码 #

import { useEffect, useState } from 'react';
import { Image, View, StyleSheet } from 'react-native';
import {TouchableRipple } from 'react-native-paper';
import * as ImagePicker from 'expo-image-picker';


export default function ImageInput({handleImage, image}) {
  
  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log("image picking:", result)

    if (!result.canceled) {
      handleImage(result.assets[0].uri);
    }
  };

  return (
    <View style={styles.container}>
      
      <TouchableRipple onPress={pickImage}  rippleColor="rgba(0, 0, 0, .32)" background={{color:'cornflowerblue', radius:70, borderless:true}} >
        <Image
       style={styles.image}
         source={image ? {uri:image} : require('../../assets/camera.png')}
          />
      </TouchableRipple>
    </View>
  );
}

const styles = StyleSheet.create({

  container: {
    alignItems: 'center'
  },

  image: {
    height: 100,
    width: 100,
    borderRadius: 100,
    marginTop: 30,
    marginBottom: 30,
    justifyContent: 'center',
  },
});

结论与解决方案 #

expo-sqlite本身不会直接导致这两个问题，它作为独立的数据库模块，与图标资源加载、图片选择的权限逻辑无直接关联。异常更可能由以下原因引发：

可能原因 #

1. Metro缓存异常：添加新依赖后未清除缓存，导致资源或模块加载失败
2. 权限配置丢失：expo-image-picker的相册访问权限未正确声明或被覆盖
3. 本地资源路径错误：图标文件路径变更或大小写不匹配（iOS对路径大小写敏感）
4. 依赖版本冲突：部分第三方包与当前Expo版本存在兼容问题

解决步骤 #

• 清除Metro缓存：执行命令 npx expo start --clear，强制清除缓存后重新启动项目
• 检查权限配置：在app.json或app.config.js中确认权限声明：

  "permissions": ["CAMERA", "MEDIA_LIBRARY"],
  "plugins": [
    [
      "expo-image-picker",
      {
        "photosPermission": "允许应用访问相册以选择图片"
      }
    ]
  ]
  

• 验证资源路径：检查所有图标文件（如camera.png）的路径是否正确，确保require的路径与文件实际位置一致，避免大小写错误
• 重新安装依赖：删除node_modules和package-lock.json，执行npx expo install重新安装所有依赖，确保版本完全匹配Expo 50的要求
• 检查sqlite初始化逻辑：确保expo-sqlite的数据库打开、操作是异步执行，不会阻塞主线程导致UI渲染异常

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