React Native 與原生代碼混編

這兩天主要了解了 React Native 的基本使用，以及和原生代碼混編的方式，最后寫了一個 demo，主要實現了在 JavaScript 代碼當中調用 UINavigationController 和自定義的 ViewController 等原生組件的功能。

原生代碼混編

我們遇到的問題是：我們要在 React Native 項目當中添加原生實現的 IM 模塊（Leanchat-ios）。

React Native 官方文檔給出了使用原生代碼擴展功能的方法:

• Native Modules
• Native UI Components

首先，IM 模塊是一個完整的功能模塊而不是一個簡單的 UI 組件，很多的功能代碼集中在各種 UIViewController 里。React Native 目前是不支持封裝 UIViewController 的，所以，第二種方法不行。

不過，可以使用第一種方式，為 JavaScript 代碼封裝一個操作 UINavigationController 的接口。除了 IM 部分以外，其他功能采用 React Native 組件實現，當需要跳轉到 IM 模塊的時候，調用封裝的接口將 IM 模塊 push 到 navigationController 上即可。

接口代碼如下:

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

#import "CDLoginVC.h"
#import "SpringBoard.h"

@implementation SpringBoard

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(gotoIM:(RCTResponseSenderBlock)callback)  
{
  UINavigationController *controller = (UINavigationController*)[[[UIApplication sharedApplication] keyWindow] rootViewController];
  CDLoginVC *loginVC = [[CDLoginVC alloc] init];
  [controller pushViewController:loginVC animated:true];
  callback(@[[NSNull null]]);
}


- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

@end 

JavaScript 當中調用上面的接口:

var React = require('react-native');

var {  
  // ...
  NativeModules
} = React;

var SpringBoard = NativeModules.SpringBoard;

var DemoView = React.createClass({

    gotoIM: function() {
        // 跳轉到 IM 模塊
        SpringBoard.gotoIM(function() {
            console.log('goto IM');
        });
    },

    render: function() {
       ...
    }
}); 

在 android 平臺上實現上述功能

上面提到的兩種原生模塊開發方式，在 android 上面也都是支持的。直接上代碼：

package com.awesomeproject;

// imports ...

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new SpringBoardPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);

        setContentView(mReactRootView);
    }

    // ...

    // 實現跳轉功能
    private class SpringBoardPackage implements ReactPackage {

        //...

        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext context) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new SpringBoard(context));
            return modules;
        }
    }

    private class SpringBoard extends ReactContextBaseJavaModule {

        //...

        @ReactMethod
        public void gotoIM(Callback callback) {
            ReactApplicationContext context = getReactApplicationContext();
            Intent intent = new Intent(context, LoginActivity.class);
            MainActivity.this.startActivity(intent);
            callback.invoke("result");
        }
    }
} 

React Native 最初只支持 iOS 平臺，最近這半個月才開始公開支持 android，目前看支持的還不是很完善，在開發工具方面支持的都還不夠好。最近一段時間以內應該是不夠穩定的。

React Native 其他方面

對移動 App 的開發經驗還不是很多，不過 React Native 提供了跨平臺的 Navigator 組件，支持 flexbox 布局，總體感覺還不錯。而且官方文檔比較全面，和 Phonegap 相比，社區支持感覺更好。

來自：http://blog.limijiaoyin.com/learn-react-native/