1

我正在尝试将图像保存到我的设备中。我使用 react-native-view-shot 来捕获组件并使用 react-native-community/cameraroll 来保存它。

我收到一个错误：

[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',
    },  
  });

谢谢您的帮助！

4

1 回答 1

1

将您的图像组件包装在 TouchableOpacity 中并链接一个函数来检查平台。确保您使用的是这个确切版本的相机胶卷。因为最新版本有一些问题 "@react-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()
        );
      }
    });
  }
于 2020-01-24T06:51:27.467 回答