話不多說 直接貼程式碼, 如有疑問 下方留言或者發郵箱

引入需要的元件
import ImagePicker2 from 'react-native-image-picker';
import RNHeicConverter from 'react-native-heic-converter';
// RNHeicConverter圖片轉換 IOS11之後 有HEIC圖片需要轉換 不然顯示不出來 

clas Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
      title: "",
      content: "",
      src: [],
      selectMap: new Map(),
    };
    this.srcArr = []
  }


<View style={{marginHorizontal: 10, marginVertical: 10, flexDirection: 'row', flexWrap: 'wrap'}}>
            {
              temp ? temp.map((v, i) => {
                return (
                  <View
                    style={{
                      flexDirection: 'row',
                      marginRight: 10,
                      marginBottom: 10,
                      position: 'relative'
                    }}
                    key={i}
                  >
                    <Image
                      roundAsCircle={true}
                      style={{
                        height: 70,
                        width: 70,
                        borderRadius: 10
                      }} source={{uri: v}}
                    />
                    <TouchableOpacity
                      style={{
                        position: 'absolute',
                        top: 0,
                        right: 0
                      }}
                      onPress={()=>{
                        let newMap = this.state.selectMap
                        let temp = [...this.state.selectMap.values()];
                        let temp2 = [...this.state.selectMap.keys()];
                        newMap.delete(temp2[i], temp[i])
                        this.setState({
                          selectMap:newMap
                        })
                      }}
                    >
                      <Image
                        style={{
                          height: 18,
                          width: 18
                        }}
                        source={require('../images/刪除圖片.png')}
                      />
                    </TouchableOpacity>
                  </View>

                )
              }) : null
            }
            {
              temp.length === 4 ?
                <Tip tipMsg="*注:最多上傳四張圖片哦"/>
                :
                <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
                  <View style={[{marginBottom: 20}]}>
                    <Image
                      style={{width: 70, height: 70}}
                      source={require('../images/增加按鈕.png')}
                    />
                  </View>
                </TouchableOpacity>
            }
          </View>
 

selectPhotoTapped() {
    const options = {
      title: '選擇圖片',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '選擇照片',
      cameraType: 'back',
      mediaType: 'photo',
      videoQuality: 'medium',  // 圖片質量
      durationLimit: 10,  // 
      maxWidth: 500, // 圖片大小
      maxHeight: 500, // 圖片大小
      quality: 0.8,
      angle: 0,
      allowsEditing: false,
      noData: false,
      storageOptions: {
        skipBackup: true
      }
    };

    ImagePicker2.showImagePicker(options, (response) => {
      // console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        Toast.loading('上傳中...')
        console.log(response)
        let source = {}
        if (Platform.OS === 'ios' && (response.fileName.endsWith('.heic') || response.fileName.endsWith('.HEIC'))) {
          RNHeicConverter.convert({ path: response.origURL }).then((data) => {
            const { success, path, error } = data

            if(!error && success && path) {

              let name = response.fileName

              name = name.replace(".heic", ".jpg")

              name = name.replace(".HEIC", ".jpg")

              source = {uri: path, name}
              console.log(source)
            } else {
              Toast.show('圖片上傳失敗!')
            }
          })
        } else {
          source = {uri: response.uri, type: response.type, name: response.fileName}
          console.log(source)
        }

        upload("/api/UploadImage/uploadDisplayImage", response)
          .then(param => {
            const responseData = JSON.parse(param.data)
            console.log(response)
            console.log(param)
            let newMap = this.state.selectMap
            this.srcArr.push(responseData.data)
            newMap.set(response.fileName, response.uri)
            Toast.info("上傳成功",0.5)
            this.setState({
              selectMap: newMap,
              src: this.srcArr
            });
          })
          .catch(err => {
            console.log(err)
            Toast.info("上傳失敗",0.5);
            this.setState({
              files: []
            });
          })
      }
    })
  }
  }