React Native中如何实现带自定义图片的图片上传按钮

你现有代码的核心问题是给<Image>组件重复声明了两个source属性，JSX语法中同名称属性后写的会覆盖前面的，最终永远只会加载本地的designIcon，选完图也不会切换成用户上传的设计稿预览。

正确实现逻辑 #

按钮默认展示上传占位图标，用户点击触发选图逻辑，选图成功后切换展示用户上传的设计稿缩略图，适配比赛投稿场景的交互需求。

完整代码示例 #

组件逻辑部分 #

import React, { useState } from 'react';
import { TouchableOpacity, Image, Text, StyleSheet, Alert } from 'react-native';
// 引入本地默认上传占位图标，替换成你项目里的实际路径
import designIcon from './assets/design-upload-icon.png';
// 如果你用的是React Native原生社区的image-picker就换成对应引入，逻辑一致
import * as ImagePicker from 'expo-image-picker';

export default function SockDesignUpload() {
  // 存储用户选中的设计稿地址，初始为空
  const [designImg, setDesignImg] = useState(null);

  // 选图方法
  const pickImage = async () => {
    // 提前申请相册权限，没权限直接提示
    const permissionRes = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionRes.granted) {
      Alert.alert('提示', '需要开启相册权限才能上传设计稿');
      return;
    }
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        // 袜子设计稿一般用1:1裁剪区，可根据实际印刷要求调整比例
        aspect: [1, 1],
        quality: 0.8,
      });
      if (!result.canceled) {
        setDesignImg(result.assets[0].uri);
        // 选完图这里可以加后续上传到服务器的逻辑
      }
    } catch (err) {
      Alert.alert('提示', '选图失败，请重试');
    }
  };

  return (
    <TouchableOpacity
      onPress={pickImage}
      activeOpacity={0.7}
      style={styles.btnWrap}
    >
      <Image
        // 条件判断加载资源：有选中的设计稿就加载用户上传的图，否则加载默认占位图标
        source={designImg ? { uri: designImg } : designIcon}
        style={styles.thumbnail}
        resizeMode="cover"
      />
      {/* 未选图状态下叠加提示文字，选完图自动隐藏 */}
      {!designImg && <Text style={styles.tipText}>点击上传袜子设计稿</Text>}
    </TouchableOpacity>
  );
}

对应样式参考 #

const styles = StyleSheet.create({
  btnWrap: {
    position: 'relative',
    width: 220,
    height: 220,
    borderRadius: 12,
    overflow: 'hidden',
    backgroundColor: '#f5f5f5',
  },
  thumbnail: {
    width: '100%',
    height: '100%',
  },
  tipText: {
    position: 'absolute',
    bottom: 16,
    left: 0,
    right: 0,
    textAlign: 'center',
    fontSize: 14,
    color: '#333',
  }
});

比赛场景适配注意点 #

• 权限配置：iOS需要在Info.plist中添加相册权限描述，安卓需要在AndroidManifest.xml中添加存储权限声明，否则选图会出现闪退
• 交互优化：选完图后可以在按钮右上角加一个小的替换图标，点击可以重新选图，避免用户误操作需要重进页面
• 规则校验：选图时可以增加图片分辨率、大小校验，比如要求设计稿分辨率不低于1200*1200、大小不超过5M，不符合要求直接提示用户，避免后续上传印刷出问题
• 上传状态：点击上传后可以加loading状态，避免用户重复点击

内容的提问来源于stack exchange，提问作者Jeandré De Villiers