ReactNative的文件處理組件:react-native-fs

版本: RN: 0.64.0,react-native-fs: ^2.17.0
最新: RN: 0.64.1,react-native-fs: ^2.18.0,可用
持續(xù)中。。。

一、安裝及配置

  1. 安裝
yarn add react-native-fs
  1. 配置:
    android/settings.gradle:
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')

android/app/build.gradle

dependencies {
    ...
    implementation project(':react-native-fs')
}

MainApplication.java (注意:這里的代碼,按照官網是缺后兩個import的)

import com.rnfs.RNFSPackage; 
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;



public class MainApplication extends Application implements ReactApplication {
   // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(), // <---- add comma
        new RNFSPackage() // <---------- add package
      );
    }

二、完整的創(chuàng)建,讀取,刪除,下載的案例:

import React, { Component } from 'react'
import { Button,  View,ToastAndroid ,Image} from 'react-native'
import RNFS from 'react-native-fs'

export default class App extends Component {
  state={sourceFile:'file:///'}
  _create = () => {
    RNFS.mkdir(RNFS.DocumentDirectoryPath+"/mydata") //新建目錄
    //新建文件,并寫入內容
    RNFS.writeFile(RNFS.DocumentDirectoryPath+"/test.txt", '一次學習,處處填坑', 'utf8')
      .then(() => console.log(RNFS.DocumentDirectoryPath+"/test.txt 創(chuàng)建完成"))
  }
  _read = () => {
    RNFS.readDir(RNFS.DocumentDirectoryPath)
      .then((result) => {
        result.forEach(file=>{
          //讀取常用文件特性
          console.log(file.size,file.path,file.isFile())
          //讀取具體文件的內容
          if(file.path.endsWith('.txt')){
            RNFS.readFile(file.path,'utf8')
            .then(content=>console.log(content))
          }
        })
      })
  }
  _delete=()=>{
    RNFS.unlink(RNFS.DocumentDirectoryPath+"/test.txt")
    .then(()=>console.log('test.txt 已經被刪除'))
  }
  _download=()=>{
    let downloadUrl="http://johnyu.cn/cafe/ice.jpeg"
    let target=RNFS.DocumentDirectoryPath+"/"+downloadUrl.split('/').slice(-1)//取出ice.jpeg
    console.log(target)
    let options={fromUrl:downloadUrl
    ,toFile:target
    ,begin:res=>{
      ToastAndroid.show(`size:${res.contentLength},type:${res.headers["Content-Type"]}`,ToastAndroid.SHORT)
    }}
    RNFS.downloadFile(options)
    .promise
    .then(res=>{
      this.setState({sourceFile:'file://'+target})
    })
  }

  render() {
    return (
      <View>
        <Button onPress={this._create} title="創(chuàng)建文件及目錄" />

        <Button onPress={this._read} title="讀目錄及文件的演示" />
        <Button onPress={this._delete} title="刪除文件的演示" />

        <Button onPress={this._download} title="下載文件的演示" />

        <Image style={{width:200,height:200}} source={{uri:this.state.sourceFile}}/>
      </View>
    )
  }
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容