react-native-image-picker上的launchImageLibrary无法保存照片

问题描述

在 react-native-image-picker 上将“ImagePicker.launchImageLibrary”更新为“launchImageLibrary”后。我收到一个错误,我无法将照片保存到 firebase。请有人帮助我。在实时数据库中,firebase 是“未定义的”

import React,{useState} from 'react';
import {Image,StyleSheet,Text,TouchableOpacity,View} 
from 'react-native';
import {launchImageLibrary} from 'react-native-image- 
picker';
import {IconAddPhoto,IconRemovePhoto,ILNullPhoto} from 
 '../../assets';
 import {Button,Gap,Header,Link} from 
'../../components';
import {Fire} from '../../config';
import {colors,fonts,showError,storeData} from 
 '../../utils';

 const UploadPhoto = ({navigation,route}) => {
  const {fullName,profession,uid} = route.params;
 const [photoForDB,setPhotoForDB] = useState('');
  const [hasPhoto,setHasPhoto] = useState(false);
  const [photo,setPhoto] = useState(ILNullPhoto);
  const getimage = () => {
  launchImageLibrary(
  {quality: 0.5,maxWidth: 200,maxHeight: 200},response => {
    if (response.didCancel || response.error) {
      showError('oops,sepertinya anda tidak memilih foto 
    nya?');
    } else {
      const source = {uri: response.uri};

      setPhotoForDB(`data:${response.type};base64,${response.data}`);
      setPhoto(source);
      setHasPhoto(true);
       }
     },);
 };

   const uploadAndContinue = () => {
    Fire.database()
  .ref('users/' + uid + '/')
  .update({photo: photoForDB});

   const data = route.params;
    data.photo = photoForDB;

     storeData('user',data);

     navigation.replace('MainApp');
    };
    return (
     <View style={styles.page}>
    <Header title="Upload Photo" />
    <View style={styles.content}>
    <View style={styles.profile}>
      <TouchableOpacity style={styles.avatarWrapper} 
       onPress={getimage}>
        <Image source={photo} style={styles.avatar} />
        {hasPhoto && <IconRemovePhoto style= 
        {styles.addPhoto} />}
        {!hasPhoto && <IconAddPhoto style={styles.addPhoto} 
      />}
      </TouchableOpacity>
      <Text style={styles.name}>{fullName}</Text>
      <Text style={styles.profession}>{profession}</Text>
    </View>
    <View>
      <Button
        disable={!hasPhoto}
        title="Upload and Continue"
        onPress={uploadAndContinue}
      />
      <Gap height={30} />
      <Link
        title="Skip for this"
        align="center"
        size={16}
        onPress={() => navigation.replace('MainApp')}
      />
        </View>
     </View>
     </View>
      );
         };

      export default UploadPhoto;

      const styles = StyleSheet.create({
        page: {flex: 1,backgroundColor: colors.white},content: {
          paddingHorizontal: 40,paddingBottom: 64,flex: 1,justifyContent: 'space-between',},profile: {
       alignItems: 'center',justifyContent: 'center',avatar: {width: 110,height: 110,borderRadius: 
    110 / 2},avatarWrapper: {
      width: 130,height: 130,borderWidth: 1,borderColor: colors.border,borderRadius: 130 / 2,alignItems: 'center',addPhoto: {position: 'absolute',bottom: 8,right: 6},name: {
        fontSize: 24,color: colors.text.primary,fontFamily: fonts.primary[600],textAlign: 'center',profession: {
              fontSize: 18,fontFamily: fonts.primary.normal,color: colors.text.secondary,marginTop: 4,});

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)