React Native Expo: попытка сохранения изображения: TypeError: Null не является объектом - PullRequest
Новая
       27

React Native Expo: попытка сохранения изображения: TypeError: Null не является объектом

0 голосов
/ 24 января 2020

Я пытаюсь получить изображение для сохранения на моем устройстве. Я использую реагирующий родной снимок для захвата компонента и реагирующий родной сообщество / камеру для его сохранения.

Я получаю сообщение об ошибке: 

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_nativeInterface.default.saveToCameraRoll')]
* http://172.16.17.76:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:152104:40 in save
* http://172.16.17.76:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:150956:45 in <unknown>
- node_modules/react-native-view-shot/src/index.js:231:31 in ViewShot#onCapture
- node_modules/react-native-view-shot/src/index.js:214:9 in firstLayoutPromise.then.then$argument_0
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Но в соответствии с на странице GitHub saveToCameraRoll действительно является функцией (https://github.com/react-native-community/react-native-cameraroll). Это мой код: 

  import React, { Component } from 'react';
  import { ScrollView, StyleSheet} from 'react-native';
  import { ExpoLinksView } from '@expo/samples';
  import ViewShot from "react-native-view-shot";
  import CameraRoll from "@react-native-community/cameraroll";

  export default class LinksScreen extends Component {
      onCapture = uri => {
          console.log("do something with ", uri);
          CameraRoll.saveToCameraRoll(uri);
      }   
      render(){
    return (
      <ScrollView style={styles.container}>
          <ViewShot onCapture={this.onCapture} captureMode="mount">
              <ExpoLinksView />
          </ViewShot>
      </ScrollView>
    );  

   }
  }

  LinksScreen.navigationOptions = { 
    title: 'Links',
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 15, 
      backgroundColor: '#fff',
    },  
  });

Спасибо за помощь!

1 Ответ

0 голосов
/ 24 января 2020

Оберните ваш компонент изображения в TouchableOpacity и связали функцию для проверки платформы. Убедитесь, что вы используете именно эту версию Cameraroll. Потому что в последнем выпуске есть некоторые проблемы "@act-native-community / cameraroll": "^ 1.0.3", 

import CameraRoll from "@react-native-community/cameraroll";

 <TouchableOpacity
    style={{ flex: 1, zIndex: 1 }}
    onLongPress={this.handlerLongClick}
  >
   <CustomImage
      source={{ uri: this.props.navigation.state.params.url }}
      style={{ height: Style.DEVICE_HEIGHT, width: Style.DEVICE_WIDTH }}
  />
</TouchableOpacity>

 handlerLongClick() {
    let url = 'Your image url generated by view shot package';
    if (Platform.OS === "ios") {
      CameraRoll.saveToCameraRoll(url);
    } else {
      this.saveVideoAndroid();
    }
  }

saveVideoAndroid() {
    Permissions.request("storage").then(response => {
      if (response === "authorized") {
        this.download(
          'Your URL',
          new Date().getTime()
        );
      }
    });
  }
...