react-native 请求数据流总结

请求‘流’数据

运行环境
"react": "^16.4.1", "react-native": "^0.55.4", node -v v7.8.0

1、关于网络请求的插件react-native-fetch-blob

官方参考地址：
https://www.npmjs.com/package/react-native-fetch-blob

2、集成插件遇到的问题

2.1 iOS ==> undefined is not an object (evaluating 'RNFetchBlob.DocumentDir')

或 Cannot read property 'DocumentDir' of undefined

link完之后在ios工程目录Library下没找到。。

手动添加
1、 addFilesTo 选择node_modules->react-native-fetch-blob->ios->RNFetchBlob.xcodeproj
2、target->Linked Frameworks And Librarys 点击“+” 找到libRNFetchBlob
完成后clean 、run

2.2 android ==> undefined is not an object (evaluating 'RNFetchBlob.DocumentDir')

解决办法：检查react-native link是否真正有效果
a、在settings.gradle中添加

include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')

b、在build.gradle中添加

dependencies {
compile project(':react-native-fetch-blob')
 }

c、在getPackages方法在的类中添加

import com.RNFetchBlob.RNFetchBlobPackage;

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
         new RNFetchBlobPackage(),                                                                                                                             
         new MainReactPackage()
      );
    }

低版本参考下面这段：

 mReactRootView = new ReactRootView(this);
 mReactInstanceManager = ReactInstanceManager.builder()
 .addPackage(new RNFetchBlobPackage())
 .build();
 mReactRootView.startReactApplication(mReactInstanceManager, "Task", null);
 setContentView(mReactRootView);

d、在AndroidManifest.xml添加

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rnfetchblobtest"
    android:versionCode="1"
    android:versionName="1.0">
 
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />                                               
+   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />                                              
 
    ...

    <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
+           <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>                          
    </intent-filter>

3、集成插件的牵扯

命令

1、创建文件
 > a.txt

2、打开文本
open -e a.txt

3、Mac 命令，将请求获取的流放入文件（ a.txt）转换成图片（a.jpg） 以验证返回的流是否是正确的
 cat a.txt | base64 --decode > a.jpg

4、下载rnpm
npm install rnpm -g

5、查找端口号对应的进程
sudo lsof -i:8081

4、react-native-fetch-blob的使用

4.1 post带参数的请求图片流或者文件流

import RNFetchBlob from 'react-native-fetch-blob'

body//请求参数,格式:{key:value}
RNFetchBlob.fetch('POST', URL,{}, body)
.then((res) => {
   this.Imagestring =  res.data//就是返回的流数据
})
.catch((error) => {
})

图片流显示
 <Image source={{uri:`data:image/jpg;base64,${this.Imagestring}`}}  style={{width:40,height:40}} resizeMode="contain" />

4.2 其他使用方式有待完善。。。

最后编辑于：2019.10.10 17:05:36