My Image Picker puede seleccionar una imagen de la galería, pero no puede mostrar la imagen en la aplicación. Lo intenté de muchas maneras y revisé mi código nuevamente, pero no estoy seguro de qué salió mal. ¿Alguien puede decirme cuál es el problema? Aquí está mi versión reactiva y selectora:
"react-native-image-crop-selector": "^0.37.2", "react-native": "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}Es porque está configurando la imagen como nula justo después de configurar su valor
.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 })también está pasando datos completos en la fuente de la imagen. En su lugar, solo pasa uri así
const renderImage = (image) => { return ( <Image style={{ width: 300, height: 300, resizeMode: 'contain' }} source={{uri:image.uri}} /> ); }