рд░рд┐рдПрдХреНрдЯрд┐рд╡ рдиреЗрдЯрд┐рд╡ - рдбрд┐рд╡рд╛рдЗрд╕ рдЧреИрд▓рд░реА рдореЗрдВ рдлрд╝реЛрдЯреЛ рдФрд░ рд╡реАрдбрд┐рдпреЛ рдХреЛ рд╕рд╣реЗрдЬреЗрдВ

рдПрдВрдбреНрд░реЙрдЗрдб / рдЖрдИрдУрдПрд╕ рдбрд┐рд╡рд╛рдЗрд╕ рдкрд░ рдлрд╝реЛрдЯреЛ рдФрд░ рд╡реАрдбрд┐рдпреЛ рд╕рд╣реЗрдЬрдирд╛ рдХрдИ рд░рд┐рдПрдХреНрдЯрд┐рд╡ рдиреЗрдЯрд┐рд╡ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рд▓рд┐рдП рдПрдХ рдЪреБрдиреМрддреА рд╣реИред рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ рдореИрдВ рджрд┐рдЦрд╛рдКрдВрдЧрд╛ рдХрд┐ рдЖрдк рдЖрд╕рд╛рдиреА рд╕реЗ рдФрд░ рджрд░реНрдж рд░рд╣рд┐рдд рддрд░реАрдХреЗ рд╕реЗ рдлрд╝реЛрдЯреЛ рдХреЛ url рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдбрд┐рд╡рд╛рдЗрд╕ рдореЗрдВ рд╕рд╣реЗрдЬ рд╕рдХрддреЗ рд╣реИрдВред

рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рд╣рдореЗрдВ рджреЛ рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ:

  1. @ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдореВрд▓-рд╕рдореБрджрд╛рдп / рдХреИрдорд░рд╛реЛрд▓ - рдЧреИрд▓рд░реА рддрдХ рдкрд╣реБрдВрдЪ рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИ (рдореИрдВ рдХреЗрд╡рд▓ рд╕рдВрд╕реНрдХрд░рдг 1.4.0 рдХреЗ рд╕рд╛рде рд╕рдлрд▓ рд░рд╣рд╛ред рд╕рдВрд╕реНрдХрд░рдгреЛрдВ "рдлреНрд░реЗрд╢рд░" рдкрд░ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдЬреНрдЮрд╛рдд рддреНрд░реБрдЯрд┐рдпрд╛рдВ рдереАрдВ, рд▓рд┐рдЦрд┐рдП рдХрд┐ рдХреНрдпрд╛ рдЖрдк рдПрдХ рдЕрд▓рдЧ рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд╕рд╛рде рд╕рдлрд▓ рд╣реБрдП рд╣реИрдВ)
  2. rn-fetch-blob - рд╕реНрдерд╛рдиреАрдп рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдлрд╝рд╛рдЗрд▓реЛрдВ рддрдХ рдкрд╣реБрдБрдЪред рдпрд╣ рдзреНрдпрд╛рди рджрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ рдпрд╣ рдкреБрд╕реНрддрдХрд╛рд▓рдп рджреЗрд╢реА рд╕рдВрд╕реНрдХрд░рдг 0.60 рдФрд░ рдЙрдЪреНрдЪрддрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ


рдЖрдИрдУрдПрд╕


рдЖрдИрдУрдПрд╕ рдкрд░, рд╕рдм рдХреБрдЫ рдмрд╣реБрдд рд╕рд░рд▓ рдирд┐рдХрд▓рд╛:

1. Info.plist рдореЗрдВ рдЬреЛрдбрд╝реЗрдВ
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди
import CameraRoll from '@react-native-community/cameraroll';

const saveImageInDevice = async (url) => {
    await CameraRoll.saveToCameraRoll(url, 'photo');
}

рдмрд╕ рдЗрддрдирд╛ рд╣реА! SaveImageInDevice рдлрд╝рдВрдХреНрд╢рди рдЗрдирдкреБрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рд▓рд┐рдВрдХ рдкрддреЗ рдХреЛ рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реИред CameraRoll.saveToCameraRoll рдлрд╝рд╛рдЗрд▓ рдХреЛ рдбрд╛рдЙрдирд▓реЛрдб рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рдбрд┐рд╡рд╛рдЗрд╕ рдЧреИрд▓рд░реА рдореЗрдВ рд╕рд╣реЗрдЬрддрд╛ рд╣реИред SaveToCameraRoll рд╡рд┐рдзрд┐ рдХрд╛ рджреВрд╕рд░рд╛ рдкреИрд░рд╛рдореАрдЯрд░ "рд╡реАрдбрд┐рдпреЛ" рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИ

рдПрдВрдбреНрд░реЙрдпрдб


рдПрдВрдбреНрд░реЙрдЗрдб рдбрд┐рд╡рд╛рдЗрд╕ рдереЛрдбрд╝рд╛ рдЕрдзрд┐рдХ рдЬрдЯрд┐рд▓ рд╣реИрдВред рддрдереНрдп рдпрд╣ рд╣реИ рдХрд┐ рдПрдВрдбреНрд░реЙрдЗрдб рдкрд░, saveToCameraRoll рд╡рд┐рдзрд┐ рдмрд╛рд╣рд░реА рдпреВрдЖрд░рдПрд▓ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рддрд░реАрдХрд╛ рдирд╣реАрдВ рдЬрд╛рдирддрд╛ рд╣реИред рдкрд╣рд▓реЗ рд╣рдореЗрдВ рдлрд╝рд╛рдЗрд▓ рдХреЛ рдмрд╛рд╣рд░реА рд╕рдВрдЧреНрд░рд╣рдг рдкрд░ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдФрд░ рдлрд┐рд░ рдЧреИрд▓рд░реА рдореЗрдВ:

import {PermissionsAndroid} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFetchBlob from 'rn-fetch-blob';

//      
const checkAndroidPermission = async () => {
    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
    await PermissionsAndroid.request(permission);
};

const saveImageInDevice = async (url) => {
     await checkAndroidPermission();
        let res = await RNFetchBlob
          .config({
            fileCache : true,
            appendExt : 'jpg' 
          })
          .fetch('GET', url);
     url = res.path();
     await CameraRoll.saveToCameraRoll(url, 'photo');
}


GET рдЕрдиреБрд░реЛрдз рджреНрд╡рд╛рд░рд╛ RNFetchBlob.fetch рдлрд╝рд╛рдЗрд▓ рдХреЛ рдмрд╛рд╣реНрдп рд╕рдВрдЧреНрд░рд╣рдг рдкрд░ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ рдФрд░ рдЗрд╕ рдлрд╝рд╛рдЗрд▓ рдХрд╛ url рдкрд╛рд╕ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рдлрд┐рд░ CameraRoll.saveToCameraRoll рдЗрд╕ рдлрд╛рдЗрд▓ рдХреЛ рдЧреИрд▓рд░реА рдореЗрдВ рдЕрдкрд▓реЛрдб рдХрд░реЗрдЧрд╛ред

рдмрд╕ рдЗрддрдирд╛ рд╣реАред рдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдзрдиреНрдпрд╡рд╛рдж!

рд▓рд┐рдВрдХ:
github.com/react-native-community/react-native-cameraroll
github.com/joltup/rn-fetch-blob

All Articles