react-native从头开始封装三方sdk（一）

1.新建项目demo

react-native init demo
cd demo
react-native run-android(想尽一切方法把项目跑起来，这一步都过不了的话后面就不用看了)

2.工欲善其事，必先利其器。要想飞我们先学会爬。

我们先实现JS调用原生方法

（1）使用Android Studio打开demo->android

（2）新建一个Module，添加一个名为Testlibrary的android library（包名可以根据自己修改）

（3）删除对应的单元测试，也可以不删（文件夹删除，build.gradle删除部分内容）

常见问题：

查看对应的build.gradle

禁止使用+,我们这里使用具体版本compile ‘com.android.support:appcompat-v7:27.0.1’

然后添加maven依赖库
在此build.gradle中添加一下依赖

然后编译一下即可。
PS：
这里强烈将build.gradle中的以下项改成与app中的build.gradle一致

compileSdkVersion
buildToolsVersion
minSdkVersion
targetSdkVersion
com.android.support:appcompat-v7

（4）添加facebook的react类库

（5）添加Java类

TestModule：

package com.witty.testlibrary;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
* Created by asus on 2018-06-28.
*/

public class TestModule extends ReactContextBaseJavaModule {

public TestModule(ReactApplicationContext reactApplicationContext){
super(reactApplicationContext);
}

/*
* 实现getName方法，返回值即js中的调用方法名
* */
@Override
public String getName() {
return "Test";
}

/*
* 定义一个方法，获取应用包名
* */
@ReactMethod
public void getPackageName(){
String name = getReactApplicationContext().getPackageName();
Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
}
}

TestPackage：

package com.witty.testlibrary;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
* Created by asus on 2018-06-28.
*/
/*
* 使用ReactPackage，暴露实例给JS
* */
public class TestPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
modules.add(new TestModule(reactContext));
return modules;
}

@Override
public List> createJSModules() {
return Collections.emptyList();
}

@Override
public List createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

（6）在testlibrary目录下创建index.js

import {NativeModules} from 'react-native'

const {Test} = NativeModules

export default Test

（7）在app->build.gradle中添加依赖

（8）在demo->android->app>src->main->java->>找到MainApplication.java,添加实例

（9）在APP.js中调用即可

import {NativeMdodules} from 'react-native'

const {Test} = NativeModules

Test.getPackageName();

（10）运行react-native run-android查看效果