Pinch 👌

Callback and promise based HTTP client that supports SSL pinning and upload files and text for React Native(ios and android).

Installation

Using NPM:

npm install react-native-pinch

Using Yarn:

yarn add react-native-pinch

Automatically link

With React Native 0.27+

react-native link react-native-pinch

With older versions of React Native

You need rnpm (npm install -g rnpm)

rnpm link react-native-pinch

Manually link

iOS (via Cocoa Pods)

Add the following line to your build targets in your Podfile

pod 'RNPinch', :path => '../node_modules/react-native-pinch'

Then run pod install

Android

in android/app/build.gradle:

dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
+   compile project(':react-native-pinch')
}

in android/settings.gradle:

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

With React Native 0.29+

in MainApplication.java:

+ import com.localz.PinchPackage;

  public class MainApplication extends Application implements ReactApplication {
    //......

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

    ......
  }

With older versions of React Native:

in MainActivity.java:

+ import com.localz.PinchPackage;

  public class MainActivity extends ReactActivity {
    ......

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

覆盖 node_modules

下载github 文件，覆盖 node_modules下的 react-native-pinch文件夹

Adding certificates

Before you can make requests using SSL pinning, you first need to add your .cer files to your project's assets.

Android

Place your .cer files under src/main/assets/.

iOS

Place your .cer files in your iOS Project. Don't forget to add them in your Build Phases > Copy Bundle Resources, in Xcode.

Example

Examples are using the ES6 standard

Requests can be made by using the fetch(url[, config, [callback]]) method of Pinch.

upload file(s) and text for android and ios

import ImagePicker from 'react-native-image-crop-picker';
    ImagePicker.openPicker({
            multiple: true
        }).then(images => {
            console.log(JSON.stringify(images));
            let arrays=[];
            if(Platform.OS==='ios'){
                for(let i=0;i<images.length;i++){
                    let  url=images[i].sourceURL;
                    let array=url.split('///');
                    console.log(array[1]);
                    arrays.push(array[1])
                }
            }else if(Platform.OS==='android'){
                for(let i=0;i<images.length;i++){
                    let  url=images[i].path;
                    let array=url.split('//');
                    console.log(array[1]);
                    arrays.push(array[1])
                }
            }

            this.uploadFiles(arrays);
        });
    uploadFiles(files_){
        var body = {
            title:'title',
            title2:'title2',
            title3:'title3',
        };
  
        let token='75670fe42df38b0db2d4ddd565a0dee253d2545f';
        let headers = {
            'Authorization':token
        }
        pinch.fetch('http://api.nohttp.net/upload', {
            method: 'post',
            //headers:headers,
            body:JSON.stringify(body),
            upload: {
                //files: ['/Users/xupeng/Documents/111313.png','/Users/xupeng/Documents//111312.png'] ios
                //files: ['/storage/emulated/0/Download/111314.png','/storage/emulated/0/Download/111313.png'] //android
                files:files_
            },
            //params:{'title':'title','body':'body'},
            timeoutInterval: 10000*5, // timeout after 10 seconds
            sslPinning: {
                cert: 'ctyun'
            }
        })
            .then(res => console.log(`We got your response! Response - ${res.bodyString})`))
            .catch(err => console.log(`Whoopsy doodle! Error - ${JSON.stringify(err)}`))
    }

Using Promises

import pinch from 'react-native-pinch';

  var body = {
            username:"admin",
            password:"123456",
        };
pinch.fetch('https://my-api.com/v1/endpoint', {
  method: 'post',
  headers: { customHeader: 'customValue' },
  body:JSON.stringify(body),
  timeoutInterval: 10000, // timeout after 10 seconds
  sslPinning: {
    cert: 'cert-file-name', // cert file name without the `.cer`
    certs: ['cert-file-name-1', 'cert-file-name-2'], // optionally specify multiple certificates
  }
})
  .then(res => console.log(`We got your response! Response - ${res.bodyString}`))
  .catch(err => console.log(`Whoopsy doodle! Error - ${err}`))

Using Callbacks

import pinch from 'react-native-pinch';

pinch.fetch('https://my-api.com/v1/endpoint', {
  method: 'post',
  headers: { customHeader: 'customValue' },
  body: '{"firstName": "Jake", "lastName": "Moxey"}',
  timeoutInterval: 10000, // timeout after 10 seconds
  sslPinning: {
    cert: 'cert-file-name', // cert file name without the `.cer`
    certs: ['cert-file-name-1', 'cert-file-name-2'], // optionally specify multiple certificates
  }
}, (err, res) => {
  if (err) {
    console.error(`Whoopsy doodle! Error - ${err}`);
    return null;
  }
  console.log(`We got your response! Response - ${res.bodyString}`);
})

Skipping validation

import pinch from 'react-native-pinch';

pinch.fetch('https://my-api.com/v1/endpoint', {
  method: 'post',
  headers: { customHeader: 'customValue' },
  body: '{"firstName": "Jake", "lastName": "Moxey"}',
  timeoutInterval: 10000, // timeout after 10 seconds
  sslPinning: {} // omit the `cert` or `certs` key, `sslPinning` can be ommited as well
})

Response Schema

{
  bodyString: '',

  headers: {},

  status: 200,

  statusText: 'OK'
}

xpbtmusic / react-native-pinch Goto Github PK

react-native-pinch's Introduction

Pinch 👌

Installation

Automatically link

With React Native 0.27+

With older versions of React Native

Manually link

iOS (via Cocoa Pods)

Android

With React Native 0.29+

With older versions of React Native:

覆盖 node_modules

Adding certificates

Android

iOS

Example

upload file(s) and text for android and ios

Using Promises

Using Callbacks

Skipping validation

Response Schema

react-native-pinch's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org