React-Native與安卓原生的混合開發(fā)

寫在前面

既然React-Native純js開發(fā)已經(jīng)搭建完畢，怎么也得搞一搞兩個(gè)的混合開發(fā)，畢竟人家原生的優(yōu)勢(shì)在那里，你是怎么也拋棄不掉的。
那步驟一步步來吧。

step1 新建安卓項(xiàng)目

這個(gè)沒啥好說的呀，跟普通創(chuàng)建項(xiàng)目一樣創(chuàng)建就ok了

step2 在項(xiàng)目根目錄引入React-Native模塊

在項(xiàng)目根目錄打開cmd窗口
輸入

npm init
npm int窗口

輸入一些項(xiàng)目的描述屬性，為了生成package.json文件的項(xiàng)目描述，根據(jù)提示來填寫就好了
接下來引入rn的一些模塊文件

npm install --save react react-native

此時(shí)會(huì)在根目錄生成一個(gè)node_modules文件夾，存的是RN的一些模塊文件
等待結(jié)束后注意看日志信息
如果顯示require react@某.某.某版本, but none was installed

就是這個(gè)

你就使用命令

npm i -S react@某.某.某版本//此處為提示的版本號(hào)

將此版本下載下來，因?yàn)閞eact-native對(duì)react的版本有嚴(yán)格要求，高于或低于某個(gè)范圍都不可以。

下載rn模塊的目錄

接下來打開package.json文件，在scripts模塊下添加

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

結(jié)果是這個(gè)樣子的

{
  "name": "rnnewdemo",
  "version": "1.0.0",
  "description": "a new demo",
  "main": "index.js",
  "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "Dstar",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-native": "^0.44.0"
  }
}

在項(xiàng)目根目錄新建一個(gè)文件index.android.js，并將以下代碼考進(jìn)去

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

step3對(duì)項(xiàng)目做一些必要的依賴

首先在app下的gradle做一下依賴

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

接著在項(xiàng)目級(jí)gradle做以下配置

allprojects {
    repositories {
       ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"http://此處目錄請(qǐng)額外注意
        }
    }
}

同步一下會(huì)出現(xiàn)如下錯(cuò)誤

Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

這個(gè)錯(cuò)誤呢是因?yàn)間oogle自帶的bug機(jī)制沖突，一般我們安卓里面很少做單元測(cè)試，實(shí)在想保留的話可以網(wǎng)上找一下資料，可以解決，我們這邊直接刪除測(cè)試模塊，同步后還有問題，是最低版本的問題

Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.44.0] C:\Users\Administrator\.android\build-cache\8c6273ea94e6f0278d98505ab3264b5cad2d0845\output\AndroidManifest.xml
   Suggestion: use tools:overrideLibrary="com.facebook.react" to force usage

所以我們將自己i項(xiàng)目的版本提高，好了，同步一下就沒問題了。

step4 開始創(chuàng)建接受rn代碼的容器，有兩種方式，我們這邊講一種方式就好了

  • 創(chuàng)建一個(gè)容器類
public class MyRNActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "HelloWorld";//此處容器名要與index.android.js里面注冊(cè)的控件名一致
    }
}

順便在清單文件里面聲明此Activity

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

注意要給一個(gè)沒有actionbar的主題,順便配置下調(diào)試的界面

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

還有很重要的，聲明網(wǎng)絡(luò)權(quán)限

<uses-permission android:name="android.permission.INTERNET"/>
  • 創(chuàng)建Application繼承RN的Application
package com.ddstar.anewrndemo;
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 App 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()
                    //將我們創(chuàng)建的包管理器給添加進(jìn)來

            );
        }
    };

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

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

同樣在清單文件配置

  • 跳轉(zhuǎn)
    我們?cè)僭捻撁孀鲆粋€(gè)跳轉(zhuǎn)到ＲＮ的頁面，在MainAcyivity做一下頁面跳轉(zhuǎn)
public void go2Rn(View view) {
        startActivity(new Intent(this, MyRNActivity.class));
    }

step5 運(yùn)行起來

首先將app先運(yùn)行起來，看到原生界面先
然后將js server運(yùn)行起來，在項(xiàng)目根目錄下啟動(dòng)cmd，然后啟動(dòng)js服務(wù)

nmp start

先顯示的是原生界面，我們?cè)谠缑纥c(diǎn)擊跳轉(zhuǎn)到rn界面，如果其他配置都沒有錯(cuò)的話，會(huì)顯示

點(diǎn)擊顯示的錯(cuò)誤信息

一般都是端口的配置問題，然后配置端口

step6 配置端口調(diào)試

模擬器按菜單鍵，真機(jī)用力甩，彈出菜單選項(xiàng)后選擇配置開發(fā)設(shè)置

配置開發(fā)設(shè)置

選最后一個(gè)
然后選擇debugging

選擇debugging

接下來配置一下端口，端口配置成跟開發(fā)這個(gè)應(yīng)用的電腦的ip+8081端口，如果不配置8081端口的話可以自行找資料修改
我的電腦的ip情況

電腦ip情況

所以我的配置

配置端口

好了，再次運(yùn)行我們的應(yīng)用

原生界面

這個(gè)是rn的界面

RN界面

然后看一下命令窗口的日志

命令窗口的顯示

如果確實(shí)是成功了，會(huì)有進(jìn)度的顯示

總結(jié)

項(xiàng)目就介紹到這里了，接下來總結(jié)一下步驟

  • 使用AS新建安卓項(xiàng)目
  • 使用npm配置項(xiàng)目信息
  • 在安卓目錄下使用npm工具添加rn模塊組件
  • package.json文件添加npm啟動(dòng)命令
  • 新建index.android.js文件，并添加簡(jiǎn)單的helloworld語法（可以先拷貝上文提到的代碼）
  • 配置一些依賴，并注意倉庫的本地文件目錄配置
  • 清單文件注冊(cè)頁面信息，并記得添加網(wǎng)絡(luò)權(quán)限
  • 運(yùn)行安卓項(xiàng)目，并啟動(dòng)js服務(wù)
  • 配置端口與開發(fā)的電腦保持在同一個(gè)ip地址
  • 再次運(yùn)行即可
  • 升職加薪，迎娶白富美，走上人生巔峰。。。呃呃呃，還早呢，這只是第一步

后記

這種東西呢，對(duì)我來說也都是全新的，中間也參考了很多別人的博客，總的來說，自己實(shí)踐過，記憶就會(huì)比較深
不清楚或者是出現(xiàn)什么錯(cuò)，不要怕，只要有日志，跑到github上面搜React-Native的issue，一般都會(huì)有解決方案
細(xì)心很重要啊，我因?yàn)榫W(wǎng)絡(luò)權(quán)限忘了配置了，每次都報(bào)異常，而且是js服務(wù)未開啟的異常，導(dǎo)致我一直以為是js那邊的錯(cuò)，天坑啊，所以以后每次創(chuàng)建項(xiàng)目，我都會(huì)先把網(wǎng)絡(luò)權(quán)限加上去

完~~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容