首页 » React Native » React Native组件资源 » 正文

[译]React Native开源网络处理-上传下载组件(react-native-networking)

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目:https://github.com/jiangqqlmj/js-coach-cn

开源项目地址:https://github.com/eduedix/react-native-networking

项目介绍

该组件为React Native开发支持模块组件,用于进行网络下载或者上传文件功能。同时兼容Android和iOS双平台。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

模块安装

1.iOS平台安装

1.1.首先确保pod已经被安装,命令如下:

$ sudo gem install cocoapods
$ pod setup

1.2.打开终端并且切换到当前根目录

1.3.通过npm安装react-native-networking组件以及通过pod进行安装AFNetworking。具体命令如下:

npm install react-native-networking --save && cd node_modules/react-native-networking && pod install && open RNNetworkingManager.xcworkspace

1.4.通过以下步骤进行安装RNNetworkingManager

  • Select RNNetworkingManager target    选中RNNetworkingManager
  • Go to Build Phases, select Link Binary with Libraries    前往Build Phases设置,选中Link Binary with Libraries
  • Remove libPods-AFNetworking and add libAFNetworking.a using + and - signs.    进行移除libPods-AFNetworking并且添加libAFNetworking.a库
  • Close RNNetworkingManager workspace.  进行关闭RNNetworkingManager

1.5.通过以下步骤进行添加链接库

  • In XCode, 选中项目导航,右击Libraries ➜ 添加文件到当前项目中
  • 选中node_modules ➜ react-native-networking and add RNNetworkingManager.xcodeproj.
  • 然后右击Libraries ➜ 添加文件到当前项目
  • 选中node_modules/react-native-networking/Pods and add Pods.xcodeproj.
  • In XCode, in the project navigator, select your project. Add libRNNetworkingManager.a to your project's Build Phases ➜ Link Binary With Libraries
  • Click RNNetworkingManager.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.

1.6.点击运行项目或者Cmd+R

2.Android平台安装

2.1.android/setting.gradle修改

...
include ':RNNetworkingManager', ':app'
project(':RNNetworkingManager').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-networking/android')

2.2.android/app/build.gradle文件修改

...
dependencies {
    ...
    compile project(':RNNetworkingManager')
}

2.3.在MainActivity.java文件中进行注册模块

import com.learnium.RNNetworkingManager.*;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new RNNetworkingManagerModule())              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

2.4.注意点:

目前Android目前只支持下载。

使用实例

下面是在react native开发中,使用实例如下:

var RNNetworkingManager = require('react-native-networking');
var url = 'localhost:3000';

// Example GET request, (download)
RNNetworkingManager.requestFile(url, {
    'method':'GET'
}, function(results) {
  console.log(results);
});

// Example POST request, (upload)
RNNetworkingManager.requestFile(url, {
    'method': 'POST',
    'data' : 'pathToYourFileHere'
}, function(results) {
    console.log(results);
});

注意点:当前GET请求会自动下载文件到你的app的Document文件夹,同样的POST上传文件也是自动上传app中的Document目录中的文件