无法解压缩文件反应本机

Question

我正在尝试从url下载scorm zip文件并解压缩并在webview中播放。

但是我遇到多个错误。到目前为止，我可以将文件下载到路径。

import React, { Component } from 'react';
import { AppRegistry,AsyncStorage ,Button, TouchableWithoutFeedback ,PermissionsAndroid, Text, Alert, StyleSheet, View } from 'react-native';

import { WebView} from 'react-native-webview';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNFetchBlob from 'react-native-fetch-blob';
import RNFS from 'react-native-fs';
import { zip, unzip, unzipAssets, subscribe } from 'react-native-zip-archive';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'
export async function request_location_runtime_permission() {

try {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
    {
      'title': 'ReactNativeCode write Permission',
      'message': 'ReactNativeCode App needs access to your location '
    },
    PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
    {
      'title': 'ReactNativeCode write Permission',
      'message': 'ReactNativeCode App needs access to your location '
    }
  )
  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
    Alert.alert(" Permission Granted.");
  }
  else {
    Alert.alert(" Permission Not Granted");
  }
} catch (err) {
  console.warn(err)
}} 
export default class ScormPlayer extends Component {
async componentDidMount() {
    await request_location_runtime_permission()
  }



constructor() {
    super()
    this.state = {
      isDone: false,

    };
    this.downloadClick = this.downloadClick.bind(this);
  }




downloadClick () {



    RNFS.downloadFile({
        fromUrl: 'url of zip file',
        toFile: `${RNFS.DocumentDirectoryPath}/file.zip`,

      }).promise.then((r) => {
        this.setState({ isDone: true })
      });

        const  zipFile = `${RNFS.DocumentDirectoryPath}/file.zip`
        const charset = 'UTF-8'
const destination = RNFS.DocumentDirectoryPath + '/'



unzip(zipFile, destination, charset)
            .then((result) => {
                console.log(result)

              })
           .catch((error) => {
            console.log('the error' + error);
       })

    };

  render() {


    const preview = this.state.isDone ? (<View style={styles.container}>
        <WebView 


         source= {{uri: `file://${RNFS.DocumentDirectoryPath}/file.zip`}}
         // source = {result}
            style= {styles.loginWebView}
        />
   <Text>{`file://${RNFS.DocumentDirectoryPath}/file.zip`}</Text>
</View>
      ) : null;
      return (
        <View style={styles.container}>

        <WebView 

        source= {{uri: `file://${RNFS.DocumentDirectoryPath}/file.zip`}}
         //source = {result}
            style= {styles.loginWebView}
        />

        <View>
        <Text  onPress={this.downloadClick}>DOWNLOAD FILE</Text>
        {preview}
      </View>


    </View>
      );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    loginWebView: {
        flex: 1,
        marginTop: 30,
        marginBottom: 20,
        justifyContent: 'center',
        alignItems: 'center',

    }, 
});

  AppRegistry.registerComponent("ScormPlayer", () => ScormPlayer);

上面的代码是我尝试过的代码，但是我无法解压缩文件并在webview中播放。 请有人帮我在哪里弄错了。预先非常感谢。