react-native-image-crop-tools CropView 未显示要裁剪的图像答案

【问题标题】：react-native-image-crop-tools CropView not showing image to be croppedreact-native-image-crop-tools CropView 未显示要裁剪的图像
【发布时间】：2021-07-08 04:46:08
【问题描述】：

我正在使用react-native-image-crop-tools 裁剪图像，但 CropView 没有显示要裁剪的图像，只显示一个空白屏幕。有什么解决办法吗？

import { CropView } from 'react-native-image-crop-tools';

const [uri, setUri] = useState('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');

{uri !== undefined && <CropView
sourceUrl={uri}
style={{flex:1}}
ref={cropViewRef}
onImageCrop={(res) => console.warn(res)}
keepAspectRatio
aspectRatio={{ width: 16, height: 9 }}
/>}

【问题讨论】：

标签： react-native

【解决方案1】：

试试这个，希望对你有帮助。

app.js

import React, { useState, useRef } from 'react';
import { Button, StyleSheet, View} from 'react-native';
import { CropView } from 'react-native-image-crop-tools';
import { launchImageLibrary } from 'react-native-image-picker';

export default function app() {
  const [uri, setUri] = useState();
  const cropViewRef = useRef();
  let options = {
    mediaType: 'photo',
    quality: 1,
  };
  return (
    <>
      <View style={styles.container}>
        <Button
          title={'Pick Image'}
          onPress={() => {
            launchImageLibrary(options, response => {
              setUri(response.assets[0].uri);
            });
          }}
        />
        {uri !== undefined && <CropView
          sourceUrl={uri}
          style={styles.cropView}
          ref={cropViewRef}
          onImageCrop={(res) => console.log(res)}
          keepAspectRatio
          aspectRatio={{ width: 16, height: 9 }}
        />}
        <Button
          title={'Get Cropped View'}
          onPress={() => {
            cropViewRef.current.saveImage(true, 100);
          }}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cropView: {
    flex: 1,
    backgroundColor: '#000'
  },
});

【讨论】：

【解决方案2】：

该库不支持远程图像。它在 iOS 中运行纯属巧合，就像原生 ios 库支持网络图像裁剪一样。

如果要裁剪远程图像，请先使用 RNFetchBlob 下载它，然后将本地文件路径传递给它。

直接支持远程图像是一项有点复杂的任务，超出了本项目的范围。

您也可以在库中查看已关闭的问题。

https://github.com/hhunaid/react-native-image-crop-tools/issues/16

你可以试试下面的例子来裁剪android平台中的网络图片：

例如：

import React, {useCallback, useEffect, useState} from 'react';
import {View, Text} from 'react-native';
import {CropView} from 'react-native-image-crop-tools';
import RNFetchBlob from 'rn-fetch-blob';

export default () => {
  const [uri, setUri] = useState('');

  const getImage = useCallback(() => {
    try {
      RNFetchBlob.config({
        fileCache: true,
        // by adding this option, the temp files will have a file extension
        appendExt: 'png',
      })
        .fetch(
          'GET',
          'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
        )
        .then(res => {
          let status = res.info().status;

          if (status === 200) {
            setUri('file://' + res.path());
          } else {
            console.log(status);
          }
        })
        // Something went wrong:
        .catch((errorMessage, statusCode) => {
          // error handling
          console.log('Error : ', errorMessage);
        });
    } catch (err) {
      console.log('Error : ', err.message);
    }
  }, []);

  useEffect(() => {
    getImage();
  }, [getImage]);

  if (uri === '') {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>{'processing...'}</Text>
      </View>
    );
  }

  return (
    <CropView
      sourceUrl={uri}
      style={{flex: 1, height: '100%', width: '100%'}}
      // ref={cropViewRef}
      onImageCrop={res => console.warn(res)}
      keepAspectRatio
      aspectRatio={{width: 16, height: 9}}
    />
  );
};

【讨论】：