android vue混合开发 android 混合rn开发

目录

• 一、简介

• 1.React Native的优点

• 二、准备

• 1.要求
• 2.搭建开发环境

• 2.1.安装依赖

• 三、创建新项目

• 1.首先使用Android Studio创建一个新的项目
• 2.在studio中的Terminal中输入指令
• 3.在项目根目录下新建一个名为.flowconfig的文件
• 4.配置reactnative相关内容
• 5.build.gradle(Module：app)配置
• 6.build.gradle(Project：RNDemo)配置
• 7.配置app模块AndroidManifest.xml文件
• 8.生成bundle文件
• 9.添加native code

• 四、Hello World

• 1.启动React
• 2.把项目编译进手机

• 五、关于React Native与android混合开发中踩的坑

一、简介

现在app需求更新越来越频繁。产品经理甚至要求核心模块的重要功能需要随时更换。之前也有解决方案，像是热更新，和H5的原始混合开发等。现在道长分享一下React Native与android混合开发这种方法。React的来源是Facebook对市场上所有JavaScript MVC框架都不满意，就决定自己写一套用来架设Instagram 的网站，后来做成了开源。

1.React Native的优点

1.React Native允许您使用JavaScript构建移动应用程序。它使用与React相同的设计，允许您从声明性组件组成丰富的移动UI。
2.React Native使用与常规iOS和Android应用程序相同的基本UI构建块。您只需使用JavaScript和React将这些构建块放在一起。
3.React Native可让您更快地构建应用程序。您可以立即重新加载应用，而不是重新编译。通过热重新加载，您甚至可以在保留应用程序状态的同时运行新代码。
4.React Native与使用Objective-C，Java，Kotlin或Swift编写的组件平滑地结合在一起。如果您需要优化应用程序的某些方面，则可以简单地下载到本机代码。在React Native中构建部分应用程序也很容易，并且直接使用本机代码构建应用程序的一部分 - 这就是Facebook应用程序的工作方式。
5.React Native的重点是在您关注的所有平台上实现开发人员效率，学习一次，随处写作。

二、准备

1.要求

支持的目标操作系统是> = Android 4.1（API 16）和> = iOS 9.0。您可以使用Windows，macOS或Linux作为开发操作系统，但默认情况下构建和运行iOS应用程序仅限于macOS（可以使用Expo等工具来解决此问题）。

2.搭建开发环境

React Native的开发环境的搭建比较麻烦（至少道长是这么认为的）。React Native是根据开发平台、目标平台、是否是新建项目来搭建环境的。咱们这里使用的开发平台是Windows，目标平台是android，新建一个项目。React Native当然是有官方开发文档的，如果需要直接点击传送门：React Native 中文网。

2.1.安装依赖

必须安装的依赖有：Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

• Node, Python2, JDK

Node下载地址如下：Node官网 在安装完成Node以后需要设置npm的镜像，以加速后面的过程：

Python2下载地址如下：Python官网

JDK下载地址如下：Oracle官网

注意Node的版本必须高于 8.3，Python的版本必须为2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。

• Yarn、React Native 的命令行工具（react-native-cli）

安装react-native-cli，指令如下：

安装react-native@latest，指令如下：

• JDK以及Android Studio
  关于Android Studio以及JDK的安装以及搭建开发环境就不细说了。

到这里就算把React Native与android混合开发的外部环境配置完成，配置版本如下：

Java SDK: 1.8.0_121
AndroidStudio: 2.2.1
Node: v10.14.2-x64
Python: 2.7.15
react-native-cli: 2.0.1
react-native: 0.57.7

三、创建新项目

1.首先使用Android Studio创建一个新的项目

2.在studio中的Terminal中输入指令

• npm init：主要根据提醒生成package.json文件

注意：
package name: (rnappdemo) 输入项目名称，全部小写
entry point: (index.js)输入reactnative的入口文件
license: (ISC) 输入许可 默认ISC

• npm install --save react react-native：安装React和React Native

然后在项目结构中出现了一个node_modules文件夹，如下图所示：

3.在项目根目录下新建一个名为.flowconfig的文件

将 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 网页的内容复制到.flowconfig文件中，如下图所示：

4.配置reactnative相关内容

• 添加"start": “node node_modules/react-native/local-cli/cli.js start” 到package.json 文件中的script标签里

• 在项目根目录下添加index_android.js文件

文件格式设置为UTF-8（选中index.js文件，File->File Encoding->more，选中UTF-8），内容如下所示：

'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}> HelloWorld !!! </Text>
       </View>
     )
   }
 }
 var styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
   },
   hello: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
 });
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

5.build.gradle(Module：app)配置

• 在android里面添加如下两个配置

packagingOptions {
    exclude "lib/arm64-v8a/librealm-jni.so"
}
configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

如下图所示：

• 在android->defaultConfig最后添加NDK支持

ndk {
    abiFilters "armeabi-v7a", "x86"
}

如下图所示：

• 在dependencies里面添加reactnative依赖

compile "com.facebook.react:react-native:+"

如下所示：

6.build.gradle(Project：RNDemo)配置

• 在allprojects->respositories中添加

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

如下图所示：

• 在gradle.properties文件添加：android.useDeprecatedNdk=true

7.配置app模块AndroidManifest.xml文件

添加权限：

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

8.生成bundle文件

在app/src/main下新建assets目录，在终端窗口Terminal中执行：

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

执行完成后，会在assets目录下生成：index.android.bundle，如下所示：

–platform：平台
–dev：开发模式
–entry-file：条目文件
–bundle-output：bundle文件生成的目录
–assets-dest：资源文件生成的目录

9.添加native code

当前Activity继承ReactActivity，代码如下所示：

package com.yushan.reactnativedemo;

import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;

import java.util.List;

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }
}

GetMainComponentName()返回的"hello_world"是在index_android.js中AppRegistry.registerComponent(‘HelloWorld’,() => HelloWorld);注册的HelloWorld模块（第一个参数’HelloWorld’）

添加一个自定义Application，代码如下所示：

package com.yushan.reactnativedemo;

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 java.util.Arrays;
import java.util.List;


public class RNApplication 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()
            );
        }

    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, false);
    }

}

然后把RNApplication添加到AndroidManifest，如下所示：

四、Hello World

1.启动React

• 在终端Terminal窗口中执行：adb reverse tcp:8081 tcp:8081
• npm start，启动react服务

结果如下所示：

2.把项目编译进手机

运行结果如下图所示：

摇一摇手机，在出现的弹窗点击"DevSettings->debugging"，设置Debug server host &port for device为：127.0.0.1:8081，然后重新运行，摇一摇，点击Reload，此时显示的就是"这是我的第一个React Native混合开发App"了，如下所示：

到这里我们就可以开心的使用React Native 愉快的开发了。

五、关于React Native与android混合开发中踩的坑

• 404 Not Found：recat-native@latest

问题原因：

1.指令输入错误

2.没有安装react-native@latest

解决方法：

npm install --save react-native@latest

• error: option ‘–entry-file’ missing

问题原因：
1.指令输入错误

• Error: ENOENT: no such file or directory

问题原因：
1.指令输入错误
2.在main文件夹下没有创建assets文件夹

解决方法：
1.在main文件夹下创建assets文件夹

• Error:Failed to resolve: com.android.support:appcompat-v7:27.1.1

问题原因：
使用过低的SDK Tool编译程序
解决方法：
在build.gradle(Project)中添加如下代码：

maven { url 'https://maven.google.com' }
        maven { url "https://jitpack.io" }

如下所示：

• code elifecycle errno 1

解决方法：
在Terminal输入如下指令：

npm install appium-chromedriver@3.0.1 --ignore-scripts

• Could not delete path

解决方法：

手动删除路径下的文件夹

• Could not connect to development server

问题原因：
服务器没有启动。
解决方法：
重新输入指令：

adb reverse tcp:8081 tcp:8081

npm start