Mac android原生工程中潜入react-native混合开发项目搭建

最近公司有意向要用react-native做开发，自己在去年的时候也接触过，不过没有深入探讨，这两天，抽出时间看了看，顺便看了一下文档，做了一个简易的dome，由于我本人用的mac os 系统，Mac os 系统不同与windos 系统，做起来也相对轻松容易：接下来我就言简意赅的阐述集成搭建步骤：

注意事项：在项目集成之前，说明你已经配置好了react-native 的开发环境，如果没有配置好请参照react-native 中文开发网站：http://reactnative.cn/docs/0.47/getting-started.html
准备好开发环境。

1.打开终端，创建一个项目根目录，如／reactNativeProject：

~$ mkdir reactNativeProject

2.在根目录下创建一个／android 目录：

~$ cd reactNativeProject
~$ mkdir android

3.打开android studio 在以android 做为android原生项目的根目录创建一个原生的应用：步骤如下：

注意：project location: 的选择路径为刚才创建项目的…／reactNativeProject／android 目录：这样直接下一步，注意选择的最小sdk版本：API 16: Android 4.1 (Jelly Bean),不得低于这个版本，低于就不支持了：

直接next，最后到finsh,创建成功android 项目：
4.接下来，要在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{"name": "MyReactNativeApp","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start"},"dependencies": {"react": "16.0.0-alpha.6","react-native": "0.44.3"}
}

具体操作如下：

$ touch package.json
$ open package.json

在打开的弹出package.json 文本编译器中复制上面要填写的内容，并保存。

5.接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：

~$ npm install

安装的结果如下图：

会多出来一个node_modules目录：

5.在原生的应用中配置maven
android/build.gradle 文件中添加 React Native 依赖:

allprojects {repositories {jcenter()maven {// All of React Native (JS, Android binaries) is installed from npmurl "$rootDir/../node_modules/react-native/android"}}
}

在 android/app/build.gradle 配置依赖库：

dependencies {.......compile "com.facebook.react:react-native:+" // From node_modules.
}

同步一下sync now。

6.配置权限：
接着，在 android/app/src/main/AndroidManifest.xml 清单文件中声明网络权限:

<uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

7.代码集成
在／reactNativeProject 根目录下创建一个index.android.js文件

～$ touch index.android.js

打开index.android.js,复制一下内容：

～$ open index.android.js

'use strict';import React from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';class HelloWorld extends React.Component {render() {return (<View style={styles.container}><Text style={styles.hello}>Hello, World</Text></View>)}
}
var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',},hello: {fontSize: 20,textAlign: 'center',margin: 10,},
});AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

在android 项目创建一个类ReactActivity.java 代码如下：

package com.example.reactnativedome;import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.Toast;import com.facebook.common.logging.FLog;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.devsupport.DoubleTapReloadRecognizer;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;import static java.security.AccessController.getContext;public class ReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {public static final int OVERLAY_PERMISSION_REQ_CODE = 1235;private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_react);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {if (!Settings.canDrawOverlays(this)) {Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,Uri.parse("package:" + getPackageName()));startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);}}mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setBundleAssetName("index.android.bundle").setJSMainModuleName("index.android").addPackage(new MainReactPackage()).setUseDeveloperSupport(BuildConfig.DEBUG).setInitialLifecycleState(LifecycleState.RESUMED).build();// 注意这里的MyReactNativeApp必须对应“index.android.js”中的// “AppRegistry.registerComponent()”的第一个参数mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);setContentView(mReactRootView);}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {
//        super.onActivityResult(requestCode, resultCode, data);if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {if (!Settings.canDrawOverlays(this)) {// SYSTEM_ALERT_WINDOW permission not granted...}}}}@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();}}@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);}
}

接着，在 android/app/src/main/AndroidManifest.xml 清单文件中注册：

<activity
            android:name=".ReactActivity"android:label="@string/app_name"android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>

在MainActivity.java 修改代码如下：

package com.example.reactnativedome;import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViewById(R.id.tv_react_native).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Intent intent=new Intent(MainActivity.this,ReactActivity.class);startActivity(intent);}});}
}

在 android studio 中 run 运行安装到手机中：
最后在android studio 中终端 terminal 下输入：

～$ nom start

效果如图：

运行结果如图示：

参考来自：http://reactnative.cn/docs/0.47/integration-with-existing-apps.html#content

Mac android原生工程中潜入react-native混合开发项目搭建相关推荐

android开发rn插件,在Android原生应用中嵌入React Native
开发工具:Android Studio , WebStorm 参考链接:React Native官方中文文档一.创建React Native项目 1.在本地React Native项目目录下,创建一 ...
React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...
React native RN 开发实例
多入口加载方式 React Native 混合开发多入口加载方式 - 知乎 initialProperties 官方文档:React Navigation moduleName 案例:GitHub - ...
uniapp android原生,在uni-app项目中集成Android原生工程
[TOC] # 在uni-app项目中集成Android原生工程按照官方的方案,我们如果进行本地打包的话,需要重新创建一个Android原生工程,于是就会导致我们管理多个项目,切来切去的也麻烦. 经 ...
4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...
【苹果家庭推iiMessage】React Native举行开发仍是iOS，用原生的代码实现类似webview的页面
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容 2.相册 ...
unity导出工程导入到iOS原生工程中详细步骤
一直想抽空整理一下unity原生工程导入iOS原生工程中的详细步骤.做iOS+vuforia+unity开发这么长时间了.从最初的小小白到现在的小白.中间趟过了好多的坑.也有一些的小小收货.做一个喜欢 ...
基于Mui与H5+开发webapp的Android原生工程打包步骤（使用新版本5+SDK与Android studio）（部分内容转自dcloud官网）...
文章背景: dcloud官网给出的打包步骤对于有一定安卓打包基础的同学来说比较容易掌握,但是对于webapp小白来讲有的地方可能没有说的太具体.下面我给大家介绍的详细一点,保证大家按照步骤就能学会打包 ...
React Native 系列(三) -- 项目结构介绍
前言本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

Mac android原生工程中潜入react-native混合开发项目搭建

Mac android原生工程中潜入react-native混合开发项目搭建相关推荐

最新文章

热门文章