摘要：如下新建一個(gè)類，來存放我們需要被調(diào)用的代碼緊接著我們需要新建一個(gè)類繼承自這個(gè)抽象類，之后我們新建的這個(gè)類，可以承載我們暴露給的方法。新建一個(gè)包，如圖圖在包下，新建一個(gè)類，如圖圖代碼如下這里有幾個(gè)事項(xiàng)，注意一下我們繼承自這個(gè)抽象類。

歡迎大家收看react-native-android系列教程，跟著本系列教程學(xué)習(xí)，可以熟練掌握react-native-android的開發(fā)，你值得擁有：

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

書接上節(jié)，我們上節(jié)說道，如何控制原生android的activity間跳轉(zhuǎn)，這次，我們?cè)囍胘s去操控這個(gè)過程。

既然要使用js去調(diào)用java，那我們的第一步，當(dāng)然是提供一個(gè)js可以調(diào)用的java接口了。

首先，照著上節(jié)的思路，我們將activity之間的跳轉(zhuǎn)，封裝成一個(gè)函數(shù)，放在MainActivity里面。如下：

public class MainActivity extends ReactActivity {

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

緊接著我們需要新建一個(gè)類(MyExtension)繼承自ReactContextBaseJavaModule這個(gè)抽象類，之后我們新建的這個(gè)類，可以承載我們暴露給js的方法。讓我們動(dòng)手開始寫這個(gè)類吧。

圖1.2.1

圖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";
    }
}

這里有幾個(gè)事項(xiàng)，注意一下：

1. 我們繼承自ReactContextBaseJavaModule這個(gè)抽象類。

2. 我們需要重寫getName方法，命名一下我們的擴(kuò)展。以后我們可以在js里面按照名字找到這個(gè)擴(kuò)展。

3. 我們寫了一個(gè)open方法，這個(gè)方法是未來會(huì)導(dǎo)出到我們的js中，并可以被js調(diào)用的方法。

我們寫好了方法，接著我們就要注冊(cè)了，我們還在extension的包里面，新建一個(gè)類(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 createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new MyExtension(reactContext));
        return modules;
    }

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

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

此時(shí)，我們的目錄結(jié)構(gòu)看起來應(yīng)該是這樣的，如圖1.3.1

圖1.3.1

接著，我們要在MainActivity中去注冊(cè)我們寫好的這個(gè)接口。
打開我們的MainActivity，其中有一個(gè)已經(jīng)寫好的方法 ---?getPackages，如圖1.4.1

圖1.4.1
我們?cè)谄渲校尤胛覀儗懞玫慕涌?ExtensionPackage)

上述步驟完成之后，就意味著我們的接口已經(jīng)導(dǎo)出了，接下來我們首先要驗(yàn)證一下。我們打開index.android.js并在require的模塊中，增加一個(gè)NativeModules(如圖2.1)

圖2.1

NativeModules中存放著我們可以調(diào)用的native模塊，還記得當(dāng)時(shí)定義我們的擴(kuò)展時(shí)，起的名字是什么嗎？

圖2.2

對(duì)！就是"MyExtension"，既然已經(jīng)注冊(cè)好了，那么我們就在js中看看，是否已經(jīng)有了呢？我們挑一個(gè)地方（本例中使用的是在constructor里）打印一下，看看是否已經(jīng)有了呢(如圖2.3)。

圖2.3

我們使用debug js，在chrome中調(diào)起調(diào)試界面（如果還不會(huì)使用，我們接下來的章節(jié)里會(huì)詳細(xì)講解，跟著我看看變量即可，如圖2.4）:

圖2.4

可以看下圖2.5，我們成功的看到了當(dāng)時(shí)我們導(dǎo)出的open函數(shù)：

圖2.5

good！！！

上一步中，我們驚喜的看到我們?cè)趈ava中定義的open方法已經(jīng)能在控制臺(tái)看到了。接下來，我們?cè)邳c(diǎn)擊list的時(shí)候，去調(diào)用一下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 {oneItem};
  }
  seeDetail() {
    NativeModules.MyExtension.open();
  }
  render() {
    return (
      
          
      
    );  
  }
}

接著，我們重新運(yùn)行一下，效果如圖3.1與圖3.2

圖3.1

圖3.2

于是乎，我們看到了運(yùn)行的效果。下一章，我們會(huì)一起看看react-native中，js調(diào)用原生代碼的原理。

本文中所用的例子，可以在這里找到：

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

下一節(jié)，我們將一起討論一下，上述調(diào)用的RN底層原理，非常淺顯易懂，不要錯(cuò)過：

原創(chuàng)文章,版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處