react-native-image-crop-picker 不显示图像

Question

我的图片选择器能够 select 图片库中的图片，但无法在应用程序上显示图片，我尝试了很多方法并重新检查了我的代码，但我不确定什么地方出了错。谁能告诉我有什么问题？这是我的 reactnative 和选择器版本：

"react-native-image-crop-picker": "^0.37.2", “本机反应”：“0.67.1”，

import { Alert, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, TextInput} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

const Imagepick = ({navigation}) => {
    const [image, setImage] = useState(null)
    const [images, setImages] = useState(null)

      const pickSingle = (cropit, circular = false, mediaType) => {
        ImagePicker.openPicker({
          width: 500,
          height: 500,
          cropping: cropit,
          cropperCircleOverlay: circular,
          sortOrder: 'none',
          compressImageMaxWidth: 1000,
          compressImageMaxHeight: 1000,
          compressImageQuality: 1,
          compressVideoPreset: 'MediumQuality',
          includeExif: true,
          cropperStatusBarColor: 'white',
          cropperToolbarColor: 'white',
          cropperActiveWidgetColor: 'white',
          cropperToolbarWidgetColor: '#3498DB',
        })
          .then((image) => {
            console.log('received image', image);
            setImage({
                uri: image.path,
                width: image.width,
                height: image.height,
                mime: image.mime,
            })
            setImage(null);
          })
          .catch((e) => {
            console.log(e);
            Alert.alert(e.message ? e.message : e);
          });
      }


    const renderAsset = (image) =>  {
        return renderImage(image);
    }

    const renderImage = (image) => {
        return (
          <Image
            style={{ width: 300, height: 300, resizeMode: 'contain' }}
            source={image}
          />
        );
      }
    

    return (
        <View style={styles.container}>

            {image ? renderAsset(image) : null}
            {images
                ? images.map((i) => (
                    <View key={i.uri}>{this.renderAsset(i)}</View>
                ))
            : null}
            
            <TouchableOpacity onPress={() => pickSingle(false)} style={styles.button}>
                <Text style={styles.text}>Select Single</Text>
            </TouchableOpacity>      

        </View>
    )
}
export {Imagepick}

Answer 1

这是因为您在设置图像的值后立即将其设置为空

.then((image) => {
            console.log('received image', image);
            setImage({
                uri: image.path,
                width: image.width,
                height: image.height,
                mime: image.mime,
            })
            // setImage(null); //remove this line
          })

您也在图像源中传递整个数据。而是像这样传递 uri

const renderImage = (image) => {
    return (
      <Image
        style={{ width: 300, height: 300, resizeMode: 'contain' }}
        source={{uri:image.uri}}
      />
    );
  }

react-native-image-crop-picker 不显示图像

react-native-image-crop-picker not displaying image

javascript

reactjs

react-native

react-native-image-picker

react-native-image-crop-picker