[React Native Android 安利系列]RN中使用js调用java代码

欢迎你们收看react-native-android系列教程，跟着本系列教程学习，能够熟练掌握react-native-android的开发，你值得拥有：

https://segmentfault.com/blog...

书接上节，咱们上节说道，如何控制原生android的activity间跳转，此次，咱们试着用js去操控这个过程。

1. 为你的应用添加一个js可调用的java接口

既然要使用js去调用java，那咱们的第一步，固然是提供一个js能够调用的java接口了。

1.1 提供一个跳转的函数

首先，照着上节的思路，咱们将activity之间的跳转，封装成一个函数，放在MainActivity里面。以下：

public class MainActivity extends ReactActivity {

    public void skip() {
        Intent intent = new Intent(this, DetailActivity.class);
        startActivity(intent);
    }
....
}

1.2 新建一个类，来存放咱们须要被调用的java代码

紧接着咱们须要新建一个类(MyExtension)继承自ReactContextBaseJavaModule这个抽象类，以后咱们新建的这个类，能够承载咱们暴露给js的方法。让咱们动手开始写这个类吧。

1.2.1 新建一个包---extension，如图1.2.1

图1.2.1

1.2.2 在包下，新建一个类---MyExtension，如图1.2.2

图1.2.2

代码以下：

package com.hellowreact.extension;

import android.content.Intent;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.hellowreact.DetailActivity;
import com.hellowreact.MainActivity;

/**
 * Created by baidu on 16/6/12.
 */
public class MyExtension extends ReactContextBaseJavaModule {
    public MyExtension(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @ReactMethod
    public void open() {
        MainActivity activity = (MainActivity) getCurrentActivity();
        activity.skip();
    }

    @Override
    public String getName() {
        return "MyExtension";
    }
}

这里有几个事项，注意一下：

1. 咱们继承自ReactContextBaseJavaModule这个抽象类。

2. 咱们须要重写getName方法，命名一下咱们的扩展。之后咱们能够在js里面按照名字找到这个扩展。

3. 咱们写了一个open方法，这个方法是将来会导出到咱们的js中，并能够被js调用的方法。

1.3 书写注册接口待用

咱们写好了方法，接着咱们就要注册了，咱们还在extension的包里面，新建一个类(ExtensionPackage)，代码以下：

package com.hellowreact.extension;

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 baidu on 16/6/12.
 */
public class ExtensionPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyExtension(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

此时，咱们的目录结构看起来应该是这样的，如图1.3.1

图1.3.1

1.4 将写好的接口注册到MainActivity中去

接着，咱们要在MainActivity中去注册咱们写好的这个接口。
打开咱们的MainActivity，其中有一个已经写好的方法 --- getPackages，如图1.4.1

图1.4.1
咱们在其中，加入咱们写好的接口(ExtensionPackage)

2 从新运行app，并在js中查看接口是否已经存在与js中

上述步骤完成以后，就意味着咱们的接口已经导出了，接下来咱们首先要验证一下。咱们打开index.android.js并在require的模块中，增长一个NativeModules(如图2.1)

图2.1

NativeModules中存放着咱们能够调用的native模块，还记得当时定义咱们的扩展时，起的名字是什么吗？

图2.2

对！就是"MyExtension"，既然已经注册好了，那么咱们就在js中看看，是否已经有了呢？咱们挑一个地方（本例中使用的是在constructor里）打印一下，看看是否已经有了呢(如图2.3)。

图2.3

咱们使用debug js，在chrome中调起调试界面（若是还不会使用，咱们接下来的章节里会详细讲解，跟着我看看变量便可，如图2.4）:

图2.4

能够看下图2.5，咱们成功的看到了当时咱们导出的open函数：

图2.5

good！！！

3 尝试调用咱们导出的open方法

上一步中，咱们惊喜的看到咱们在java中定义的open方法已经能在控制台看到了。接下来，咱们在点击list的时候，去调用一下open方法：

class hellowReact extends Component {
  constructor(props) {
    console.log(NativeModules.MyExtension);
    super(props);
    var list = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = { 
      list: list.cloneWithRows(['hello', 'react', 'this', 'is', 'my', 'listView'])
    };  
  }
  oneRow(oneItem) {
    return <Text>{oneItem}</Text>;
  }
  seeDetail() {
    NativeModules.MyExtension.open();
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.list}
          renderRow={this.oneRow}
          onTouchEnd={this.seeDetail}
        />  
      </View>
    );  
  }
}

接着，咱们从新运行一下，效果如图3.1与图3.2

图3.1

图3.2

因而乎，咱们看到了运行的效果。下一章，咱们会一块儿看看react-native中，js调用原生代码的原理。

本文中所用的例子，能够在这里找到：

https://github.com/houyu01/re...

下一节，咱们将一块儿讨论一下，上述调用的RN底层原理，很是浅显易懂，不要错过：

原创文章,版权全部,转载请注明出处