一、簡介

現在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、index.android.bundle.meta，如下所示：

–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

關於React Native與Android的混編道長暫時分享到這裏，可能以後會分享。希望這篇博客會對你有一些幫助。如果需要Demo，就點擊傳送門：RNDemo
參考（有一些找不到了，非常感謝這些大佬的分享）：
https://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search
https://blog.csdn.net/xiaofanglei/article/details/80327088
https://www.cnblogs.com/xiyuan2016/p/7866044.html

android：React Native混合開發初見

目錄

一、簡介

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混合開發中踩的坑

985 碩士程序員，空窗 4 個月沒有 Offer！

營銷系統黑名單優化：位圖的應用解析

一文搞懂 Spring 循環依賴

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

python內置函數——sorted

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

抖音面試：說說延遲任務的調度算法？

高德地圖：解決android系統在鎖屏條件下無法持續定位

android：解決小米手機相機返回照片旋轉問題

android：Java垃圾回收機制

android：越來越難實現的進程保活

android bug: FileNoFoundExecption

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結