Android React Native Expo本地图片加载失败求助

Hey there, let's figure out why your local image isn't loading even though your code runs without errors. Here are the critical base configurations and checks you might have overlooked:

1. Missing File Access Permissions #

Expo requires explicit permissions to access files on Android devices, especially for external storage. Even if you've got the right path, your app can't read the file without proper permissions.

• First, add the required permissions to your app.json file:

  {
    "expo": {
      "permissions": ["READ_EXTERNAL_STORAGE", "CAMERA_ROLL"]
    }
  }
  

• Then, request the permissions dynamically in your component before trying to load the image. Use expo-permissions (or the newer expo-media-library for better compatibility):

  import * as Permissions from 'expo-permissions';
  
  componentDidMount = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if (status !== 'granted') {
      alert('Permission to access photos is required!');
    }
  };
  

2. Verify the File Path is Valid #

Your manual path might not point to the actual location of the image. Use expo-file-system to check if the file exists:

• Install the package first: expo install expo-file-system
• Add this check in your component:

  import * as FileSystem from 'expo-file-system';
  
  componentDidMount = async () => {
    const fileInfo = await FileSystem.getInfoAsync('file:///storage/emulated/0/DCIM/images.jpeg');
    console.log('File exists:', fileInfo.exists); // Should log true if path is correct
    console.log('File URI:', fileInfo.uri);
  };
  

If fileInfo.exists is false, your path is wrong—double-check the actual file location (sometimes images are in DCIM/Camera instead of DCIM/, or the filename has a typo).

3. Avoid Direct file:// Paths on Android 10+ #

Android 10 and above use Scoped Storage, which restricts direct access to the root storage directory. Instead of hardcoding the path, use expo-media-library to retrieve the image's valid URI:

• Install the package: expo install expo-media-library
• Modify your code to fetch the image via Media Library:

  import * as MediaLibrary from 'expo-media-library';
  
  state = {
    imageUri: null
  };
  
  componentDidMount = async () => {
    const { status } = await MediaLibrary.requestPermissionsAsync();
    if (status === 'granted') {
      const assets = await MediaLibrary.getAssetsAsync({
        mediaType: 'photo',
        sortBy: [MediaLibrary.SortBy.modificationTime],
        limit: 1 // Adjust to find your specific image
      });
      if (assets.totalCount > 0) {
        this.setState({ imageUri: assets.assets[0].uri });
      }
    }
  };
  
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
        {this.state.imageUri && (
          <Image 
            source={{uri: this.state.imageUri}} 
            style={{width: 60, height: 60}} 
            resizeMode="cover"
          />
        )}
      </View>
    );
  }
  

4. Check Image Component Configuration #

Make sure your Image component has:

• Explicit width and height (you already have this, good!)
• A resizeMode prop (e.g., resizeMode="cover" or resizeMode="contain") to ensure the image renders properly
• Confirm the image file isn't corrupted—try opening it on your device to verify

5. Expo Go Limitations #

If you're testing with Expo Go, keep in mind that it has some restrictions for local file access. For full compatibility, consider building a standalone APK/IPA to test on your device.

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