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

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

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

書接上節，我們上節說道，如何控制原生android的activity間跳轉，這次，我們試著用js去操控這個過程。

既然要使用js去調用java，那我們的第一步，當然是提供一個js可以調用的java接口了。

首先，照著上節的思路，我們將activity之間的跳轉，封裝成一個函數，放在MainActivity里面。如下：

public class MainActivity extends ReactActivity {

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

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

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

這里有幾個事項，注意一下：

1. 我們繼承自ReactContextBaseJavaModule這個抽象類。

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

3. 我們寫了一個open方法，這個方法是未來會導出到我們的js中，并可以被js調用的方法。

我們寫好了方法，接著我們就要注冊了，我們還在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 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();
    }
}

此時，我們的目錄結構看起來應該是這樣的，如圖1.3.1

圖1.3.1

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

圖1.4.1
我們在其中，加入我們寫好的接口(ExtensionPackage)

上述步驟完成之后，就意味著我們的接口已經導出了，接下來我們首先要驗證一下。我們打開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！！！

上一步中，我們驚喜的看到我們在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 {oneItem};
  }
  seeDetail() {
    NativeModules.MyExtension.open();
  }
  render() {
    return (
      
          
      
    );  
  }
}

接著，我們重新運行一下，效果如圖3.1與圖3.2

圖3.1

圖3.2

于是乎，我們看到了運行的效果。下一章，我們會一起看看react-native中，js調用原生代碼的原理。

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

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

下一節，我們將一起討論一下，上述調用的RN底層原理，非常淺顯易懂，不要錯過：

原創文章,版權所有,轉載請注明出處