native数据类型 react_react-native 请求数据流总结

请求‘流’数据

运行环境

"react": "^16.4.1", "react-native": "^0.55.4", node -v v7.8.0

1、关于网络请求的插件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 getPackages() {

return Arrays.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添加

package="com.rnfetchblobtest"

android:versionCode="1"

android:versionName="1.0">

+

+

...

+

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) => {

})

图片流显示

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