通过onPress中的动态ID在react-native中下载文件（从API获取）

Posted 2021-04-10

我正在尝试下载通过onPress从API获取的文件。

目前我所做的是使用API​​从服务器获取文件。当我按下文件名时，我收到通知“下载不成功”，我控制台“无法从给我n代码的网址下载文件”。

我现在正在做的是使用onPress发送文件名到“down_file”函数下载文件对应于放在服务器文件夹中的那个名字。

我试图使用注释代码，但我没有'/data/user/0/com.aura/files/RNFetchBlobTmp_vzryqngv2ylp9wj0n3256m'中没有文件

import * as React from 'react';
import { TextInput, View, StyleSheet, Image, Button, Alert, TouchableOpacity, Text, FlatList } from 'react-native';
import { StackNavigator } from 'react-navigation';
import RNFetchBlob from 'rn-fetch-blob';
import Toast from 'react-native-simple-toast';
import RNFS from 'react-native-fs';

export default class Students extends React.Component {

  constructor(props) {
    super(props);
    this.state = { 
         pdf_list:[]
    };
  }

  componentDidMount(){    
    const url = 'https://athirst-desertions.000webhostapp.com/download_pdf.php';
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
       this.setState({
         pdf_list: responseJson
       })
    })
    .catch((error) => {
      console.log(error);
    })
  }

  down_file(user_pdf){

    // RNFetchBlob
    // .config({
    //     useDownloadManager : true, 
    //     fileCache : true
    // })
    // .fetch('GET', 'http://athirst-desertions.000webhostapp.com/pdfs/{user_pdf}.pdf', {
    // })
    // .then((res) => {
    //   path: 'http://athirst-desertions.000webhostapp.com/pdfs/{user_pdf}.pdf';
    //   console.log('The file saved to ', res.path());
    // })

      const url = 'http://athirst-desertions.000webhostapp.com/pdfs/`${user_pdf}`.pdf';
      const { config, fs } = RNFetchBlob;
      const downloads = fs.dirs.DownloadDir;
      return config({
        // add this option that makes response data to be stored as a file,
        // this is much more performant.
        fileCache : true,
        addandroidDownloads : {
          useDownloadManager : true,
          notification : true,
          path:  downloads + '/' + user_pdf + '.pdf',
        }
      })
      .fetch('GET', url);

  }

  render() {
    return (
      <View style={styles.container}>
         <FlatList
            data={this.state.pdf_list}
            keyExtractor={(item, index) => index}
            renderItem={({ item }) =>
            <View style={styles.container}>
                <Text onPress={this.down_file.bind(this, item.user_pdf)}>
                  {item.user_pdf}
                </Text>
            </View>
            }
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    marginTop:100,
  },
});

答案

因此，您遇到的问题是当您使用绑定函数时

this.down_file.bind(this, item.user_pdf)

函数内的user_pdf变为'this'，这是一个引用。

可能解决方案

对我来说，绑定一个函数，同时将它作为道具传递从来都不是一个好选择。

我所做的就是这样，首先不是绑定函数，而只是用你想传递的参数调用它

onPress={this.down_file(this, item.user_pdf)}

现在的问题是每次调用render时都会调用函数，部分代码将无法工作，因为此时所有内容都没有准备好。要解决此问题，请更改您的函数以返回另一个函数，该函数将在您实际按下时调用。

down_file(user_pdf) {
    return () => {...}
}

把你所有的逻辑都放在花括号中......

这样做不是在每个渲染中执行函数内部的代码，而是简单地返回一个函数，该函数将在实际调用onPress时执行代码。这与onPress = {this.doOnPress}的行为相同

PS：记得在构造函数中用'this'绑定你的函数

即

this.down_file = this.down_file.bind(this)

因为有时根据执行的顺序，使用错误的'this'。

希望这可以帮助。