saveToCameraRoll не является функцией

Question

Я пытаюсь отправить изображения, снятые с помощью библиотеки React Native Camera, в Camera Roll.

Когда пользователь нажимает кнопку, запускается следующая функция:

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true }
      const data = await this.camera.takePictureAsync(options)
      CameraRoll.saveToCameraRoll(data.uri)
    }
  }

Я уже знаю, что приложение отправляет изображения в папку кэша, потому что после выполнения этого кода отображается ссылка на изображение:

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true }
      const data = await this.camera.takePictureAsync(options)
      console.log(data.uri)
    }
  }

Отладчик показывает следующую ошибку:

Possible Unhandled Promise Rejection (id:0)
React Native Camera: TypeError: _reactNative.default.saveToCameraRoll is not a function

Код компонента Cam:

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native'
import { RNCamera } from 'react-native-camera'
import CameraRoll from 'react-native'
import ActionButton from 'react-native-action-button'
import Icon from 'react-native-vector-icons/Ionicons'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  button: {
    height: 200,

    justifyContent: 'flex-end',
    alignItems: 'center'
  },

  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },

});


export default class Cam extends Component {
  constructor() {
    super()
    this.takePicture = this.takePicture.bind(this)
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true }
      const data = await this.camera.takePictureAsync(options)
      CameraRoll.saveToCameraRoll(data.uri)
    }
  }

  render() {
    return (
      <View style={styles.container}>

        <RNCamera
          ref={ref => {this.camera = ref}}
          style={{
            flex: 1,
            width: '100%',
            position: 'relative'
          }}
        >
        </RNCamera>

        <ActionButton size={80} useNativeFeedback={false} buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item useNativeFeedback={false} buttonColor='#9b59b6' title="Settings" onPress={this.props.switchScreen}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item useNativeFeedback={false} buttonColor='#1abc9c' title="Start" onPress={this.takePicture}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>

        </ActionButton>

      </View>
    )
  }
}

Answer 1

Глядя на этот пример того, как использовать CameraRoll:

import {
  View,
  Text,
  TouchableHighlight,
  Modal,
  StyleSheet,
  Button,
  CameraRoll,
  Image,
  Dimensions,
  ScrollView,
} from 'react-native'

---

Вы должны заменить:

import CameraRoll from 'react-native';

на

import { CameraRoll } from 'react-native';

(я поставил его как ответ, чтобы его можно было принять и закрыть вопрос)

---

---

В своем коде вы можетевзаимозаменять импорт как:

import React, {
  Component,
} from 'react';

import { 
   RNCamera,
} from 'react-native-camera';

import {
  CameraRoll,
  StyleSheet,
  View,
} from 'react-native';

import ActionButton from 'react-native-action-button';

import Icon from 'react-native-vector-icons/Ionicons';