反应原生图像 uri 和异步存储答案

【问题标题】：react native image uri and async storage反应原生图像 uri 和异步存储
【发布时间】：2021-12-08 03:08:01
【问题描述】：

我正在尝试保存个人资料图片并使用 asyncStorage 保存它。商店部分工作正常，但如果我关闭应用程序并重新打开它不会显示图像。

我记录了图像 uri，有 uri 但不能解决问题。

这是我的代码

这是图片选择部分

const ImagePick = async () => {
    const options = {
      title: 'Seçim yapınız.',
      cancelButtonTitle: 'İptal',
      takePhotoButtonTitle: 'Bir fotoğraf çek',
      chooseFromLibraryButtonTitle: 'Galeriden seç',
      chooseWhichLibraryTitle: 'Galeriden seç',
      mediaType: 'photo',
      storageOptions: {skipBackup: true, path: 'images'},
    };

    let isCameraPermitted = await requestCameraPermission();
    let isStoragePermitted = await requestExternalWritePermission();

    if (isCameraPermitted && isStoragePermitted) {
      ImagePicker.showImagePicker(options, async response => {
        //console.log('response', response);
        if (response.didCancel) {
          console.log('Kullanıcı fotoğraf seçimini iptal etti');
        } else if (response.customButton) {
          console.log('Özel butona tıklandı.');
        } else if (response.error) {
          console.log('error', 'Bir hata oluştu.');
        } else {
          console.log(response.fileName);
          let uri = response.uri;
          let path = response.uri;
          if (Platform.OS === 'ios') {
            path = '~' + path.substring(path.indexOf('/Documents'));
          }
          if (!response.fileName) {
            response.fileName = path.split('/').pop();
          }
          let name = response.fileName;
          let type = `image/${name.split('.').slice(-1)[0]}`;
          console.log('uri', uri);
          console.log('name', name);
          console.log('type', type);
          setImageUri(response.uri);
          try {
            await AsyncStorage.setItem('profilePicture', response.uri);
            console.log('async storage kayıt başarılı');
          } catch (error) {
            console.log(error);
          }
        }
      });
    }
  };

我得到这样的图像

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

  const getProfilePicture = async () => {
    const profilePicture = await AsyncStorage.getItem('profilePicture');
    console.log('profilePicture', profilePicture);

    if (profilePicture !== null) {
      setImageUri(profilePicture);
      setIsLoading(false);
    } else {
      setImageUri(
        'https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg',
      );
      setIsLoading(false);
    }
  };

【问题讨论】：

标签： react-native asyncstorage react-native-image-picker

【解决方案1】：

模拟器是问题所在。在设备中它正在工作

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。