无数据库/服务器时能否测试React Native应用的图片上传功能？

一、实现上传框UI与选择逻辑 #

根据你想要的效果，我们可以实现一个带虚线边框的上传区域，点击后唤起相册选择图片，同时支持图片预览。下面分裸React Native项目和Expo项目两种场景给出代码：

组件代码

import React, { useState } from 'react';
import { View, TouchableOpacity, Image, Text, StyleSheet } from 'react-native';
// 根据项目类型选择对应的图片选择库
import ImagePicker from 'react-native-image-picker'; // 裸RN用这个
// import * as ImagePicker from 'expo-image-picker'; // Expo项目用这个

const ImageUploadBox = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImagePick = () => {
    const options = {
      mediaType: 'photo',
      quality: 0.8, // 压缩图片质量
      maxWidth: 600,
      maxHeight: 600,
    };

    // 裸RN项目逻辑
    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        console.log('用户取消选择');
      } else if (response.errorCode) {
        console.log('图片选择错误:', response.errorMessage);
      } else {
        setSelectedImage({ uri: response.uri });
      }
    });

    // Expo项目逻辑（注释掉上面裸RN代码，启用这段）
    // ImagePicker.launchImageLibraryAsync(options)
    //   .then(response => {
    //     if (!response.canceled) {
    //       setSelectedImage({ uri: response.assets[0].uri });
    //     }
    //   })
    //   .catch(err => console.error('选择图片失败:', err));
  };

  return (
    <TouchableOpacity 
      style={styles.uploadContainer}
      onPress={handleImagePick}
      activeOpacity={0.8}
    >
      {selectedImage ? (
        <Image source={selectedImage} style={styles.previewImage} resizeMode="cover" />
      ) : (
        <View style={styles.placeholder}>
          <Text style={styles.placeholderText}>点击上传图片</Text>
        </View>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  uploadContainer: {
    width: '90%',
    height: 220,
    marginHorizontal: '5%',
    borderWidth: 1,
    borderColor: '#999',
    borderStyle: 'dashed',
    borderRadius: 8,
    overflow: 'hidden',
  },
  previewImage: {
    width: '100%',
    height: '100%',
  },
  placeholder: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  placeholderText: {
    color: '#666',
    fontSize: 16,
  },
});

export default ImageUploadBox;

依赖安装与权限配置

• 裸RN项目：

  npm install react-native-image-picker
  

  然后配置权限：

  • Android：在AndroidManifest.xml中添加

    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    

  • iOS：在Info.plist中添加

    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要访问您的相册以选择图片</string>
    

• Expo项目：

  npx expo install expo-image-picker
  

  在app.json中配置权限：

  "ios": {
    "infoPlist": {
      "NSPhotoLibraryUsageDescription": "需要访问您的相册以选择图片"
    }
  },
  "android": {
    "permissions": ["READ_MEDIA_IMAGES"]
  }
  

二、测试方案（真实开发常用流程） #

1. 真机测试（最推荐）
   直接将项目打包安装到真机上测试：

   • 验证点击上传框是否能正常唤起相册
   • 选择不同尺寸的图片，检查预览是否正常显示
   • 测试取消选择、权限拒绝等异常场景的提示逻辑

2. 模拟器测试

   • iOS模拟器：通过File > Import导入本地图片到模拟器相册，再进行选择测试
   • Android模拟器：拖拽本地图片到模拟器界面，或在模拟器的「相册」应用中添加测试图片，再测试选择流程

3. 权限边界测试
   进入手机设置关闭应用的相册权限，点击上传框时，验证是否能正确引导用户开启权限（可搭配react-native-permissions库实现权限请求与提示）

4. 单元测试（可选，用于覆盖核心逻辑）
   用Jest + React Native Testing Library测试组件逻辑：

   import React from 'react';
   import { render, fireEvent } from '@testing-library/react-native';
   import ImageUploadBox from './ImageUploadBox';
   
   // 模拟图片选择库
   jest.mock('react-native-image-picker', () => ({
     launchImageLibrary: jest.fn((_, callback) => callback({ uri: 'test-image-uri' })),
   }));
   
   test('点击上传框后显示预览图片', () => {
     const { getByText, getByRole } = render(<ImageUploadBox />);
     fireEvent.press(getByRole('button'));
     expect(getByText('点击上传图片')).not.toBeInTheDocument();
     expect(getByRole('image')).toBeInTheDocument();
   });
   

三、额外优化建议 #

• 图片上传到服务器：可以将选中的图片转为FormData，通过fetch或axios发送到后端接口

  const uploadToServer = async (imageUri) => {
    const formData = new FormData();
    formData.append('avatar', {
      uri: imageUri,
      type: 'image/jpeg',
      name: 'upload.jpg',
    });
  
    try {
      const res = await fetch('https://your-api.com/upload', {
        method: 'POST',
        body: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const result = await res.json();
      console.log('上传成功:', result);
    } catch (err) {
      console.error('上传失败:', err);
    }
  };
  

• 添加加载状态：选择图片或上传时显示加载动画，提升用户体验

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