ReactNative 保存图片到相册(使用pod管理)

如果没有使用pod 管理iOS端的库，可以直接看这一篇文章：

• React Native - 使用CameraRoll将图片保存到本地相册

如果你使用pod管理项目，则需要将 RCTCameraRoll 添加到pod file中，具体：

• Configuring CocoaPods dependencies - react native docs

# podfile
source 'https://github.com/CocoaPods/Specs.git'

# Required for Swift apps
platform :ios, '8.0'
use_frameworks!

# The target name is most likely the name of your project.
target 'swift-2048' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
    'RCTCameraRoll',  # !!! 将相册添加到这里 ---- 看这一行 ----
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

添加到podfile中后，使用 pod install 进行安装。

安装完成之后， 需要在 Info.plist 文件中添加权限，注意iOS11+ 和 iOS10 2个权限都不一样，因此需要把2个权限都添加进去，如果不添加权限，应用会闪退：

• App crash on CameraRoll.saveToCameraRoll in iOS in react-native - Stack Overflow

在Info.plist中添加：

# ios11
Privacy - Photo Library Additions Usage Description String 应用需要访问您的相册(这个可自定义)

# ios10
Privacy - Photo Library Usage Description String 应用需要访问您的相册(这个可自定义)

做完上面操作后，**千万记住将项目clean一下，否则可能报 RCTCameraRollManager is undefined 错误！！！ **

clean完之后即可使用 CameraRoll

import { CameraRoll } from 'react-native';

class Demo extends Component {
    // ...
    saveImageToCameraRoll() {
        CameraRoll.save(imgURL, 'photo')
          // 这一步的时候iOS会弹出提示 '应用需要访问您的相册'
          // 即上面Info.plist中定义的权限文字
        .then((imgPathToSave) => {
           // 成功保存 imgPathToSave 将显示文件保存的路径
           // eg: 'assets-library://asset/....'
        })
        .catch(err => {
           // 保存失败    
        })
    }
}

上面仅仅介绍了iOS端的使用方式，android端的可以参考：

• ReactNative图片保存到相册(Android 和 ios - 简书

另外 CameraRoll 官方文档：

• CameraRoll - facebook react native docs CameraRoll