Expo React Native，如何选择从expo图像拾取器获得的默认本地图像或用户图像

基础概念

Expo 是一个开源工具集，用于构建跨平台的移动应用。React Native 是一个用于构建原生移动应用的 JavaScript 框架。Expo 提供了许多 React Native 的原生模块，使得开发者可以更容易地使用这些功能。

选择默认本地图像或用户图像

在使用 Expo 的图像拾取器（Image Picker）时，你可以选择从拾取器获取的默认本地图像或用户选择的图像。以下是如何实现这一功能的步骤：

1. 安装 Expo Image Picker

首先，你需要安装 Expo Image Picker 模块：

expo install expo-image-picker

2. 请求权限

在使用图像拾取器之前，你需要请求相机和相册的权限：

import * as Permissions from 'expo-permissions';

const requestPermissionsAsync = async () => {
  const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  if (status !== 'granted') {
    alert('Sorry, we need camera roll permissions to select an image.');
    return false;
  }
  return true;
};

3. 使用图像拾取器

接下来，你可以使用图像拾取器来获取图像：

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const hasPermission = await requestPermissionsAsync();
  if (!hasPermission) return;

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.cancelled) {
    // result.uri is the URL to the image
    console.log(result.uri);
  }
};

4. 选择默认本地图像或用户图像

你可以通过条件判断来选择默认本地图像或用户选择的图像：

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

const App = () => {
  const [imageUri, setImageUri] = useState(null);

  const pickImage = async () => {
    const hasPermission = await requestPermissionsAsync();
    if (!hasPermission) return;

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImageUri(result.uri);
    }
  };

  const defaultImageUri = 'path/to/default/image.png';

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {imageUri ? (
        <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
      ) : (
        <Image source={{ uri: defaultImageUri }} style={{ width: 200, height: 200 }} />
      )}
    </View>
  );
};

export default App;