react-native + as <react-native嵌入原生应用开发>

这几天开始根据react-native中文网进行react-native+android studio开发,但是在看了官网之后,你会发现项目并跑不起来,辗转几次,翻看别人博客,多是官网的照搬,在一个朋友的帮助下完成react-native的嵌入原生应用.

图一



图二



点击MainActivity<图一>中的start_react按钮 进入MyReactActivity<图二>

接着进入正题 react-native嵌入应用开发:

1.

在项目下创建package.json描述文件:

npm init

图中红圈标注就是项目的描述信息:即包名,版本号,作者等等;接着看配置好的package.json

{
"name": "app",
"version": "1.0.0",
"description": "react demo",
"main": "index.js",
"scripts": {

},
"keywords": [
"react",
"test"
],
"author": "houruixiang",
"license": "ISC",
"dependencies": {
"install": "^0.10.1",
"react": "^16.0.0-alpha.12",
"react-native": "^0.46.2"
}

然后在package.json中添加:

"start": "node node_modules/react-native/local-cli/cli.js start"

{
"name": "app",
"version": "1.0.0",
"description": "react demo",
"main": "index.js",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
},
"keywords": [
"react",
"test"
],
"author": "houruixiang",
"license": "ISC",
"dependencies": {
"install": "^0.10.1",
"react": "^16.0.0-alpha.12",
"react-native": "^0.46.2"
}
}

2.

配置资源文件assets

在package.jason,中加入:

"bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"

3.

创建node_modules目录并把react和react-native下载到了其中

npm install --save react react-native

这样就创建了node_modules,里面是js的modules,最主要的就是react和react-native的代码;

4.

接下来在项目根目录中 手动 创建index.android.js文件，然后将下面的代码复制粘贴进来：

'use strict';

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

export default class ReactDemo extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<ScrollView>
<Text style={{fontSize:20}}>Scroll me plz</Text>
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Text style={{fontSize:20}}>If you like</Text>
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Text style={{fontSize:20}}>Scrolling down</Text>
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style=
10f07
{{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Text style={{fontSize:20}}>What's the best</Text>
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Text style={{fontSize:20}}>Framework around?</Text>
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Image source={pic} style={{width: 193, height: 110}} />
<Text style={{fontSize:20}}>React Native</Text>
</ScrollView>
);
}
}

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('ReactDemo', () => ReactDemo);

注意AppRegistry.registerComponent(‘项目名’, () => 项目名);项目名必须与自己工程一直,index.android.js的类名也必须与项目名一致

5.

android studio中相关包的依赖

4.1maven 和react-native依赖

在app->build.gradle中添加依赖:

android{
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.1'
}
}
dependencies {
....
compile "com.facebook.react:react-native:+" // From node_modules.
}

在项目<我的是reactDemo中添加>的build.gradle中添加依赖:

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

4.2.ndk的配置

在app->build.gradle中配置:

android {
compileSdkVersion 25
buildToolsVersion "25.0.2"
defaultConfig {
...
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
...
}
packagingOptions {
exclude "lib/arm64-v8a"
}
...
}

6.

在清单文件AndroidManifest.xml中配置activity及权限

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.houruixiang.reactdemo">

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

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

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

<!--摇一摇-->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

7.

android下代码填写

MyReactActivity:

package com.example.houruixiang.reactdemo;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

/**
* Created by houruixiang on 2017/7/13.
*/

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@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())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();

// 注意这里的HelloWorld必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "ReactDemo", null);

setContentView(mReactRootView);
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}

@Override
protected void onPause() {
super.onPause();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}

@Override
protected void onResume() {
super.onResume();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}

@Override
protected void onDestroy() {
super.onDestroy();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}

@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}

MainActivity

package com.example.houruixiang.reactdemo;

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.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private static final int OVERLAY_PERMISSION_REQ_CODE = 1;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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);
}
}

initEvent();
}

private void initEvent() {
Button btn = (Button) findViewById(R.id.start_react);
btn.setOnClickListener(this);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent 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...
}
}
}
}

@Override
public void onClick(View v) {
startActivity(new Intent(this,MyReactActivity.class));
}
}

8.

权限添加

在API 23之前配置运行react-native项目需要在手机设置–>应用管理–>项目<即本项目> 开启浮窗权限

在API 23之后,需要在代码中动态配置权限:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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);
}
}

initEvent();
}

.......

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent 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...
}
}
}
}

9.

第一次开启项目手动配置

在MyReactActivty界面 会红屏,需要摇晃手机进行设置:

图一



点击Dev Settings—>进入图二

图二



点击Animations FPS Summaries—>进入图三进行ip 配置

图三



这就是react-native嵌入原生app的步骤,欢迎完善,对于一些bug将会在后续博文中总结,欢迎提意见,关注;期待一起进步