RN学习之路之

之路之"/>

RN学习之路之

1，前提是你必须完成Android 集成RN的操作，要不然下面没法玩

具体怎么玩请参考渣渣的笔记之
=3619fb52aae9cd06f3989b12e48b849a

2，RN页面如何调用Android 原生页面了

大家知道：Android 调用RN页面其实就是StartActivity

3,首先创建一个 MyIntentModule类 让其实现ReactContextBaseJavaModule 接口

实现getName() 和自定义注解的自定义方法
startActivityFromJS这里就叫这个了名字吧
（名字可以随意起名字但是必须加注解 @ReactMethod ）
说了这么多可能还是懵逼下面直接上代码

package com.gsc.androidinrndemo;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;/*** .::::.* .::::::::.* :::::::::::  FUCK YOU* ..:::::::::::'* '::::::::::::'* .::::::::::* '::::::::::::::..* ..::::::::::::.* ``::::::::::::::::* ::::``:::::::::'        .:::.* ::::'   ':::::'       .::::::::.* .::::'      ::::     .:::::::'::::.* .:::'       :::::  .:::::::::' ':::::.* .::'        :::::.:::::::::'      ':::::.* .::'         ::::::::::::::'         ``::::.* …:::           ::::::::::::'              ``::.* ```` ':.          ':::::::::'                  ::::..* '.:::::'                    ':'````..* * 作者：jiangnanyizhou on 2018/2/12 10:36* 邮箱：373654981@qq*/
public class MyIntentModule extends ReactContextBaseJavaModule {public MyIntentModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "IntentMoudle";}@ReactMethodpublic 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中

4 创建一个MyReactPackage类 implements ReactPackage

目的为了注册这个模板到RN
下面是代码

package com.gsc.androidinrndemo;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;/*** .::::.* .::::::::.* :::::::::::  FUCK YOU* ..:::::::::::'* '::::::::::::'* .::::::::::* '::::::::::::::..* ..::::::::::::.* ``::::::::::::::::* ::::``:::::::::'        .:::.* ::::'   ':::::'       .::::::::.* .::::'      ::::     .:::::::'::::.* .:::'       :::::  .:::::::::' ':::::.* .::'        :::::.:::::::::'      ':::::.* .::'         ::::::::::::::'         ``::::.* …:::           ::::::::::::'              ``::.* ```` ':.          ':::::::::'                  ::::..* '.:::::'                    ':'````..* * 作者：jiangnanyizhou on 2018/2/12 10:38* 邮箱：373654981@qq*/public class MyReactPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}
}

5 在之前集成RN的页面注册此模块内（

不懂请看片头推荐的笔记）

package com.gsc.androidinrndemo;import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.reactmon.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;/*** .::::.* .::::::::.* :::::::::::  FUCK YOU* ..:::::::::::'* '::::::::::::'* .::::::::::* '::::::::::::::..* ..::::::::::::.* ``::::::::::::::::* ::::``:::::::::'        .:::.* ::::'   ':::::'       .::::::::.* .::::'      ::::     .:::::::'::::.* .:::'       :::::  .:::::::::' ':::::.* .::'        :::::.:::::::::'      ':::::.* .::'         ::::::::::::::'         ``::::.* …:::           ::::::::::::'              ``::.* ```` ':.          ':::::::::'                  ::::..* '.:::::'                    ':'````..* * 作者：jiangnanyizhou on 2018/2/3 15:29* 邮箱：373654981@qq*/public class BaseRnActivity extends Activity implements DefaultHardwareBackBtnHandler {private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setBundleAssetName("index.android.bundle").setJSMainModulePath("index").addPackage(new MainReactPackage()).addPackage(new MyReactPackage())//注册包名.setUseDeveloperSupport(BuildConfig.DEBUG).setInitialLifecycleState(LifecycleState.RESUMED).build();//这里的AndroidRnDemoApp必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数mReactRootView.startReactApplication(mReactInstanceManager, "AndroidRnDemoApp", null);//加载ReactRootView到布局中setContentView(mReactRootView);}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}/*** ReactInstanceManager生命周期同activity*/@Overrideprotected void onPause() {super.onPause();if (mReactInstanceManager != null) {mReactInstanceManager.onHostPause(this);}}@Overrideprotected void onResume() {super.onResume();if (mReactInstanceManager != null) {mReactInstanceManager.onHostResume(this, this);}}@Overrideprotected void onDestroy() {super.onDestroy();if (mReactInstanceManager != null) {mReactInstanceManager.onHostDestroy(this);}}@Overridepublic void onBackPressed() {if (mReactInstanceManager != null) {mReactInstanceManager.onBackPressed();} else {super.onBackPressed();}}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {mReactInstanceManager.showDevOptionsDialog();return true;}return super.onKeyUp(keyCode, event);}
}

6，准备跳转到原生Android 的页面准被

这里随便创建一个

package com.gsc.androidinrndemo;import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.TextView;
import android.widget.Toast;import org.w3c.dom.Text;/*** .::::.* .::::::::.* :::::::::::  FUCK YOU* ..:::::::::::'* '::::::::::::'* .::::::::::* '::::::::::::::..* ..::::::::::::.* ``::::::::::::::::* ::::``:::::::::'        .:::.* ::::'   ':::::'       .::::::::.* .::::'      ::::     .:::::::'::::.* .:::'       :::::  .:::::::::' ':::::.* .::'        :::::.:::::::::'      ':::::.* .::'         ::::::::::::::'         ``::::.* …:::           ::::::::::::'              ``::.* ```` ':.          ':::::::::'                  ::::..* '.:::::'                    ':'````..* * 作者：jiangnanyizhou on 2018/2/12 11:38* 邮箱：373654981@qq*/
public class MyNativePage extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);String params = getIntent().getStringExtra("params");Toast.makeText(this,"RN页面你这个家伙给我传的啥玩意!"+params,Toast.LENGTH_LONG).show();Log.i("gsc","RN页面你这个家伙给我传的啥玩意!"+params);TextView tv=new TextView(this);tv.setText("I am android  原生页面" +getClass().getSimpleName());setContentView(tv);}
}

7，不要忘了在Android原生中注册6中页面

  <activity android:name=".MyNativePage"></activity>

在index.js同级目录下创建IntentMoudle.android.js 文件，目的引入原生模块

'use strict';    
import { NativeModules } from 'react-native';  
module.exports = NativeModules.IntentMoudle;  

8，在入口文件添加跳转到Android原生的点击事件

import React from 'react';
import {AppRegistry, StyleSheet, Text, View,  TouchableOpacity
} from 'react-native';
class HelloWorld extends React.Component {constructor(props){  super(props);  //console.log(NativeActivity);  }  _newNativeActivity(){  IntentMoudle.startActivityFromJS("com.gsc.androidinrndemo.MyNativePage","hello form RN ");  }  render() {return (<View style={styles.container}>   <Text style={styles.hello}>I am form RN </Text><TouchableOpacity onPress={this._newNativeActivity}> <Text style={styles.hello}>New Native Activity</Text>  </TouchableOpacity> </View>);}
}
import IntentMoudle from './IntentMoudle'
var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',},hello: {fontSize: 20,textAlign: 'center',margin: 10,},
});
AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);

最后附上图

源码下载地址：