关于React Native 跳转到原生页面界面详解

接上文，实现ReactNative跳转到原生界面的详解步骤.
下面，开始学习吧：
一、自定义一个Module类，并实现RN方法，如下：
创建一个MyIntentModule，继承RN的ReactContextBaseJavaModule，实现两个方法getName和startActivityFromJS，代码如下：

package com.helloword;import android.app.Activity;import android.content.Intent;import com.facebook.react.bridge.JSApplicationIllegalArgumentException;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;/** * Created by zhangjianmin on 2017/4/20. */public class MyIntentModule extends ReactContextBaseJavaModule {    public MyIntentModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "IntentMoudle";    }    @ReactMethod    public void startActivityFromJS(String name, String params){        try{            Activity currentActivity = getCurrentActivity();            if(null!=currentActivity){                Class toActivity = Class.forName(name);                Intent intent = new Intent(currentActivity,toActivity);                intent.putExtra("params", params);                currentActivity.startActivity(intent);            }        }catch(Exception e){            throw new JSApplicationIllegalArgumentException(                    "不能打开Activity : "+e.getMessage());        }    }}//注意：记住getName方法中的命名名称，JS中调用需要//注意：startActivityFromJS方法添加RN注解(@ReactMethod)，否则该方法将不被添加到RN中

二、自定义一个注册包，并实现RN的ReactPackage

package com.helloword;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.Arrays;import java.util.Collections;import java.util.List;/** * Created by zhangjianmin on 2017/4/20. */public class MyReactPackage implements ReactPackage {    @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));    }    @Override    public List<Class<? extends JavaScriptModule>> createJSModules() {        return Collections.emptyList();    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

三、在项目代码入口处添加自定义的注册包（位置自定义）

具体代码如下：

package com.helloword;import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import com.microsoft.codepush.react.CodePush;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication {  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {    @Override    public boolean getUseDeveloperSupport() {      return BuildConfig.DEBUG;    }    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(          new MainReactPackage(),              new MyReactPackage(),              new CodePush("E9afFCggw314-0Uz84ygf72p2lva4kJNWW_aG",MainApplication.this, com.microsoft.codepush.react.BuildConfig.DEBUG)      );    }  };  @Override  public ReactNativeHost getReactNativeHost() {    return mReactNativeHost;  }  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);  }}

四、使用编辑器打开index.android.js(我使用的是sublime)
1：在RN根目录自定义的images中放入一张图片，供点击效果使用（可不添加，使用button）

2:在JS中引用images中的图片,如下:

//注意：需引入Image组件,否则会报错，无法找到该组件

import {  AppRegistry,  StyleSheet,  Text,  View,  Image,} from 'react-native';

此时，可运行load查看效果，效果图如下所示：

哈哈，图片已成功添加进入JS。
3：添加TouchableNativeFeedback、NativeModules组件(组件详细介绍)
，定义跳转的原生界面如下:


4、最后一步，不要忘记在原生Android中定义自己将要跳转的界面（此步骤不在描述）
最终效果图如下所示：

好了，关于React Native 跳转到原生页面界面已到此结束。后续慢慢跳入深坑中继续研究（以上三篇文章只针对于入门RN童鞋研究，RN大神就不需要了）

---

以下是整个JS的源码，直接复制修改即可:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import codePush from 'react-native-code-push'import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  Image,  NativeModules,  TouchableNativeFeedback} from 'react-native';export default class HelloWord extends Component {  componentDidMount(){     codePush.sync({      installMode: codePush.InstallMode.IMMEDIATE,      updateDialog: true     },     (status) => {      switch (status) {        case codePush.SyncStatus.CHECKING_FOR_UPDATE:            console.log('codePush.SyncStatus.CHECKING_FOR_UPDATE');          break;        case codePush.SyncStatus.AWAITING_USER_ACTION:          console.log('codePush.SyncStatus.AWAITING_USER_ACTION');          break;        case codePush.SyncStatus.DOWNLOADING_PACKAGE:          console.log('codePush.SyncStatus.DOWNLOADING_PACKAGE');          break;         case codePush.SyncStatus.INSTALLING_UPDATE:          console.log('codePush.SyncStatus.INSTALLING_UPDATE');          break;        case codePush.SyncStatus.UP_TO_DATE:          console.log('codePush.SyncStatus.UP_TO_DATE');          break;        case codePush.SyncStatus.UPDATE_IGNORED:          console.log('codePush.SyncStatus.UPDATE_IGNORED');          break;        case codePush.SyncStatus.UPDATE_INSTALLED:          console.log('codePush.SyncStatus.UPDATE_INSTALLED');          break;        case codePush.SyncStatus.SYNC_IN_PROGRESS:          console.log('codePush.SyncStatus.SYNC_IN_PROGRESS');          break;        case codePush.SyncStatus.UNKNOWN_ERROR:          console.log('codePush.SyncStatus.UNKNOWN_ERROR');          break;      }     },     ({ receivedBytes, totalBytes, }) => {      console.log('receivedBytes / totalBytes: ------------    ' + receivedBytes+'/'+totalBytes);      }    );   }  render() {    return (      <View style={styles.container}>      <TouchableNativeFeedback onPress={() =>  NativeModules.IntentMoudle.startActivityFromJS("com.helloword.FristActivity","我是从JS传过来的参数信息.")}background={TouchableNativeFeedback.SelectableBackground()}>             <Image source={require('./images/aaaaaa.png')}      ></Image>      </TouchableNativeFeedback>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.android.js        </Text>        <Text style={styles.instructions}>          Double tap R on your keyboard to reload,{'\n'}          Shake or press menu button for dev menu        </Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('HelloWord', () => HelloWord);