React Native save base64 image to album

Goal

Save a base64 encode image to User album,
User can open album app and see that image.

Working Code

(test under Android phone, work for me)
using React Native 0.51

import fetch_blob from 'react-native-fetch-blob';
import RNFS from 'react-native-fs';
  const fs = fetch_blob.fs
  const dirs = fetch_blob.fs.dirs 
  const file_path = dirs.DCIMDir + "/haha.png"
  // Test under 'Samsung Galaxy Note 5'
  // console.log(dirs.DocumentDir) // /data/user/0/com.bigjpg/files
  // console.log(dirs.CacheDir)    // /data/user/0/com.bigjpg/cache
  // console.log(dirs.DCIMDir)     // /storage/emulated/0/DCIM
  // console.log(dirs.DownloadDir) // /storage/emulated/0/Download
  // console.log(dirs.PictureDir)  // /storage/emulated/0/Pictures
  
  var image_data = json.qr.split('data:image/png;base64,');
  image_data = image_data[1];
  
  RNFS.writeFile(file_path, image_data, 'base64')
  .catch((error) => {
    alert(JSON.stringify(error));
  });

react native code react native code

Explain

react-native-fetch-blob is for file path
react-native-fs is for save file
json.qr is base64 encode image data string: data:image/png;base64,iVrm..etc

I actually submit a Stackoverflow question
https://stackoverflow.com/questions/48134397/react-native-save-base64-image-to-album

Last

Any question you can contact me at: guokrfans#gmail.com


in case you want see full code, here it is:

Full Code

import React, { Component } from 'react';
import { View, StyleSheet, Button, AsyncStorage, FlatList, Text, Image } from 'react-native';
import I18n from '../i18n/i18n';
import API from './API';
import BigjpgStore from './BigjpgStore.js';

import fetch_blob from ‘react-native-fetch-blob’; import RNFS from ‘react-native-fs’;

export default class QRScreen extends React.Component { constructor(props) { super(props); this.state = { list: [{ key: ‘a’ }, { key: ‘b’ }], img_url: ‘’, img_base64: ‘’, }; } getQR(){ var params = { goods: ‘std’, }; var esc = encodeURIComponent; var query = Object.keys(params) .map(k => esc(k) + ‘=’ + esc(params[k])) .join(’&’);

var api = API.youzan_order;
var url = api + '?' + query;
fetch(url, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Cookie': BigjpgStore.cookie
  },
})
.then((res) => {
  return res.json()
}).then((json) => {
  this.setState({
    img_url: json.qr_url,
    img_base64: json.qr,
  })
  const fs = fetch_blob.fs
  const dirs = fetch_blob.fs.dirs 
  const file_path = dirs.DCIMDir + "/bigjpg.png"
  // Test under 'Samsung Galaxy Note 5'
  // console.log(dirs.DocumentDir) // /data/user/0/com.bigjpg/files
  // console.log(dirs.CacheDir)    // /data/user/0/com.bigjpg/cache
  // console.log(dirs.DCIMDir)     // /storage/emulated/0/DCIM
  // console.log(dirs.DownloadDir) // /storage/emulated/0/Download
  // console.log(dirs.PictureDir)  // /storage/emulated/0/Pictures
  var image_data = json.qr.split('data:image/png;base64,');
  image_data = image_data[1];
  RNFS.writeFile(file_path, image_data, 'base64')
  .catch((error) => {
    alert(JSON.stringify(error));
  });

}).catch((error) => {
  alert(JSON.stringify(error));
});

} render() { return ( <View> <View> {this.state.img_base64 != ’’ && <Image style={{ width: 150, height: 150 }} source={{ uri: this.state.img_base64 }} /> } <View style={{ marginBottom: 80 }}> <Button onPress={() => { this.getQR() }} title=‘Get QR’></Button> </View> </View> </View> ); } }

you can't just copy&paste to make it work.
there are some code you don't have
like

import I18n from '../i18n/i18n';
import API from './API';
import BigjpgStore from './BigjpgStore.js';

I still post these out anyway, hope it help.

使用 Hugo 构建
主题 StackJimmy 设计