如何将文件从服务器下载到我在 react-native 中的项目代码工作区中的特定文件夹中



我有一个反应原生项目女巫,我有时需要更新我的资产,我在应用程序附近的项目根目录中有一个"应用程序/资产"文件夹.js,我安装了"react-native-fetch-blob"来下载文件,并且还使用它的文件系统 api 将其写入我的"assets"文件夹中,但我无法将其保存在我的文件夹中我只能使用我不知道它在哪里的"RNFetchBlob.fs.dirs.DocumentDir",而且我不能在我的代码中使用它,如何将下载的文件准确写入我的"资产"文件夹?这是我的代码:

import RNFetchBlob from 'rn-fetch-blob'
type Props = {};
export default class App extends Component<Props> {
  constructor(){
    super();
    this.state = {
        download : 'not yet'
    }
  }
  componentDidMount(){
    this._testDownload();
  }
  _testDownload = () => {
    RNFetchBlob.fetch('GET', 'https://www.gstatic.com/webp/gallery3/1.png', {
    Authorization : 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NzIwMDY4MDEsInVpZCI6Mjk5LCJ1c2VybmFtZSI6Imd1ZXN0XzM5MjQ4NDUiLCJlbWFpbCI6IiIsInJvbGVzIjpbIlVTRVIiXX0.gQ_Gqehx3tcWYI0C5CGmpaTfT33t_TPCKbuIYYOqVBU',
    'Content-Type' : 'octet-stream',
    // more headers  ..
  })
  .then((res) => {
    let status = res.info().status;
    console.log('status' , status)
    if(status == 200) {
      // the conversion is done in native code
      let base64Str = res.base64()     
      RNFetchBlob.fs.writeFile(`${RNFetchBlob.fs.dirs.DocumentDir}/app/assets/1.png`, base64Str, 'base64')
              .then(()=>{
                console.log('here check')
              }).catch(err => console.log('err', err))      
    } else {
      // handle other status codes
    }
  })
  // Something went wrong:
  .catch((errorMessage, statusCode) => {
    // error handling
  })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{this.state.download}</Text>
      </View>
    );
  }
}
Use this code for download image using RNFetchBlob 
more information visit 

https://www.npmjs.com/package/rn-fetch-blob?activeTab=dependents

import RNFetchBlob from 'rn-fetch-blob'
type Props = {};
export default class App extends Component<Props> {
  constructor(){
    super();
    this.state = {
        download : ''
    }
  }
  componentDidMount(){
    this._testDownload();
  }
  _testDownload = () => {
        PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: "Storage",
            message: "This app would like to store some files on your phone"
          }
        )
          .then(() => {
            let dirs =
              `/storage/emulated/0/app/assets/`

              RNFetchBlob.config({
                path: dirs + '/1.png',
                fileCache: true
              })
                .fetch("GET",' https://www.gstatic.com/webp/gallery3/1.png', {})
                .then(res => {
                  console.log("res.data============================", res.data);
                })
                .catch(err => {
                  console.log("Error ", err);
                });
            }
          })

  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{this.state.download}</Text>
      </View>
    );
  }
}

相关内容

  • 没有找到相关文章

最新更新