关于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);