React Native安卓端的一些注意事項

分類：技術 時間:2017-01-13

React-native for Android:

標簽： react-native

1. 前言

React-native是目前最火的一種APP混合開發語言。本文旨在幫助一些不熟悉安卓原生開發的程序員快速熟悉安卓目錄結構。

使用工具：

js--WebStorm;

安卓原生--Android Studio;

2. 目錄結構

--1:新建一個React-native項目，并把項目分別導入到WebStorm，Android Studio中，目錄如下：

--2:安卓基本組件進行介紹：

Activity:

一個Activity是一個應用程序組件，提供一個屏幕，用戶可以用來展示或者交互去完成某件事情。一個應用程序通常由多個activities組成，他們通常是松耦合關系。通常，一個應用程序中的activity被指定為quot;mainquot;activity，當第一次啟動應用程序的時候呈現給用戶的那個activity。每一個activity可以啟動另一個activity為了完成不同的動作。每一次一個activity啟動，前一個activity就停止了，但是系統保留activity在一個棧上（“backstack”）。當一個新activity啟動，它被推送到棧頂，取得用戶焦點。BackStack符合簡單“后進先出”原則，所以，當用戶完成當前activity然后點擊back按鈕，它被彈出棧（并且被摧毀），然后之前的activity恢復，activity的生命周期執行。

當一個activity因新的activity啟動而停止時，它的狀態就會發生變化而代碼層次上來說就是activity生命周期回調函數在不同時機執行。回調函數在一個activity可能會被執行多次，不同的回調函數提供完成適合這個狀態的指定操作。例如，當停止的時候，activity應該釋放任何大的對象，例如網絡數據庫連接。當activity恢復，可以重新獲得必要的資源和恢復被中斷的動作。這些狀態轉換都是activity的生命周期的部分。

創建一個activity，必須創建一個activity的子類。安卓版本高于23時，需要繼承自AppCompatActivity否則繼承自Activity。

Fragment:

Fragment是activity的界面中的一部分或一種行為。可以把多個Fragment組合到一個activity中來創建一個多界面

并且可以在多個activity中重用一個Fragment。可以把Fragment任務模塊化的一段activity，它具有自己的生命周期，

接收它自己的事件，并可以在activity運行時被添加或刪除。

Fragment不能獨立存在，它必須嵌入到activity中，而且Fragment的生命周期直接受所在的activity的影響。例

如：當activity暫停時，他擁有的所有的Fragment都暫停了，當activity銷毀時，他擁有的所有Fragment都被銷毀。然

而，當activity運行時（在onResume()之后，onPause()之前），可以單獨地操作每個Fragment，比如添加或刪除它

們。當中執行上述針對Fragment的事務時，可以將事務添加到一個棧中，這個棧被activity管理，棧中的每一條都是一

個Fragment的一次事務。有了這個棧，就可以反向執行Fragment的事務，這樣就可以在Fragment級支持“返回”鍵

（向后導航）。

當向activity中添加一個Fragment時，它須置于ViewGroup控件中，并且需定義Fragment自己的界面。可以在

layout.xml布局文件中聲明Fragment，元素為：lt;fragmentgt;；也可以在代碼中創建Fragment，然后把它加入到

ViewGroup控件中。然而，Fragment不一定非要放在activity的界面中，它可以隱藏在后臺為activity工作。

AndroidManifest.xml:清單文件

1-：權限控制lt;上網權限等gt;

2-：Activity和Service等需要注冊

lt;manifest xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
package=quot;com.keynotequot;
android:versionCode=quot;1quot;
android:versionName=quot;1.0quot;gt;

lt;uses-permission android:name=quot;android.permission.INTERNETquot; /gt;
lt;uses-permission android:name=quot;android.permission.SYSTEM_ALERT_WINDOWquot;/gt;

lt;uses-sdk
    android:minSdkVersion=quot;16quot;
    android:targetSdkVersion=quot;22quot; /gt;

lt;application
  android:name=quot;.MainApplicationquot;
  android:allowBackup=quot;truequot;
  android:label=quot;@string/app_namequot;
  android:icon=quot;@mipmap/ic_launcherquot;
  android:theme=quot;@style/AppThemequot;gt;
  lt;activity
    android:name=quot;.activity.MainActivityquot;
    android:label=quot;@string/app_namequot;
    android:configChanges=quot;keyboard|keyboardHidden|orientation|screenSizequot;gt;
    lt;intent-filtergt;
        lt;action android:name=quot;android.intent.action.MAINquot; /gt;
        lt;category android:name=quot;android.intent.category.LAUNCHERquot; /gt;
    lt;/intent-filtergt;
  lt;/activitygt;
  lt;activity android:name=quot;com.facebook.react.devsupport.DevSettingsActivityquot; /gt;
lt;/applicationgt;

lt;/manifestgt;

從這個文件中可以看出：

1-：安卓應用的包名：package=quot;com.keynotequot;

2-：安卓APP的版本號：android:versionCode=quot;1quot;

android:versionName=quot;1.0quot;

3-：權限：上網權限和系統彈出框權限

lt;uses-permission android:name=quot;android.permission.INTERNETquot; /gt;
 lt;uses-permission android:name=quot;android.permission.SYSTEM_ALERT_WINDOWquot;/gt;

4-：此APP需要運轉在最低和最高的安卓系統

lt;uses-sdk
    android:minSdkVersion=quot;16quot;
    android:targetSdkVersion=quot;22quot; /gt;

5-：此應用在手機桌面上顯示的名字：

android:label=quot;@string/app_namequot;

6-：此應用在手機桌面上的圖標：

android:icon=quot;@mipmap/ic_launcherquot;

7-：此應用在手機上的主題樣式：

android:theme=quot;@style/AppThemequot;

8-：原生應用的啟動的第一個Activitylt;此處名字是：MainActivitygt;

lt;activity
    android:name=quot;.activity.MainActivityquot;
    android:label=quot;@string/app_namequot;
    android:configChanges=quot;keyboard|keyboardHidden|orientation|screenSizequot;gt;
    lt;intent-filtergt;
        lt;action android:name=quot;android.intent.action.MAINquot; /gt;
        lt;category android:name=quot;android.intent.category.LAUNCHERquot; /gt;
    lt;/intent-filtergt;
  lt;/activitygt;

9-：調試，可以在正式發布時進行刪除：

lt;activity android:name=quot;com.facebook.react.devsupport.DevSettingsActivityquot; /gt;

--3:包的導入：

package com.keynote：表示這個文件所在的項目中的具體路徑；

import android.XXXXX;表示導入的淚或者方法或者對象是安卓原生自帶的；

import java.util.XXXX; 表示使用的方法或者是或者對象是Java自帶的；

未導入相關需要的對象或者類時，系統會在缺少的累下面畫紅線并報錯。

package com.keynote;
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 MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
  return BuildConfig.DEBUG;
}

@Override
protected Listlt;ReactPackagegt; getPackages() {
  return Arrays.lt;ReactPackagegt;asList(
      new MainReactPackage()
  );
  }
 };

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

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

-4:關于build.gradle:

Android Studio是通過Gradle來管理第三方。所以，我們需要熟悉基本的配置信息；

在安卓目錄下，存在兩個build.gradle文件，一個是根目錄，一個存在在APP包下面的；

存在APP目錄下的build.gradle：

android {
  //安卓編譯系統
  compileSdkVersion 23
  buildToolsVersion quot;23.0.1quot;

defaultConfig {
    //報名表
    applicationId quot;com.keynotequot;
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName quot;1.0quot;
    //ndk開發時支持的芯片
    ndk {
        abiFilters quot;armeabi-v7aquot;, quot;x86quot;
    }
}

//依賴的第三方包
dependencies {
compile fileTree(dir: quot;libsquot;, include: [quot;*.jarquot;])
compile quot;com.android.support:appcompat-v7:23.0.1quot;
compile quot;com.facebook.react:react-native: quot;  // From    node_modules
 }

根目錄下的build.gradle：

dependencies {
    //版本號：
    classpath 'com.android.tools.build:gradle:2.1.2'
}

通常，我們會靜態設置gradle的版本：

在項目目錄下的gradle/wrapper/gradle-wrapper.propertis中：

distributionUrl=https://services.gradle.org/distributions/gradle-2.14-all.zip

-5:關于Jdk,Sdk:lt;也可以通過setting設置路徑gt;

在項目目錄下的：local.propertis中：

ndk.dir=/Users/erhu/Library/Android/sdk/ndk-bundle

sdk.dir=/Users/erhu/Library/Android/sdk

3. 開發常見需求

-1：修改APP名字lt;一些使用文件的目錄gt;

1--package.json

2--index.android.js

3--android/settings.gradle

4--android/app/build.gradle;

5--android/app/src/main/java/{projectname}

6--android/app/src/main/java/{projectname}/MainActivity

7--android/app/src/main/AndroidManifest.xml

android:label=quot;@string/app_namequot;

8--android/app/src/main/res/valuse/strings.xml

lt;string name=quot;app_namequot;gt;AwesomeProjectlt;/stringgt;

7與8，需要保證一致！

若只是想修改應用的名字，直接執行7，8即可！把AwesomeProject修改成你想要的名字。

-2：圖標

1--確認

android/app/src/main/res/mipmap--xxx,

或者

android/app/src/main/res/drawable--xxx

每一個目錄下有不同大小的圖標-- xxx.pnglt;適配安卓不同機型gt;

2--android/app/src/main/AndroidManifest.xml

當放入的是mipmap,

android:icon=quot;@mipmap/xxxquot;

當放入的是drawable

android:icon=quot;@drawable/xxxquot;

-3：包名：

android/app/src/main/AndroidManifest.xml

package=quot;com.awesomeprojectquot;

修改包名如下：

1--android/app/src/main/AndroidManifest.xml

2--android/app/build.gradle;

defaultConfig{
applicationId  “packagename”
}

3--android/app/build/generated/source/buildConfig/debug/{packagename}/BuildConfig;

public static final String APPLICATION_ID = quot;packagenamequot;;

注意觀察目錄結構

假設之前包名為“aaa.bbbbbb”,在編輯器里分為兩層，而在Android Studio編輯器里面只有一層；

當你要把包名修改成“aaa.bbbbbb.ccc”的時候，需要在編輯器里，新建一個文件夾名字為“ccc”,把之前在“bbbbbb”目錄下的文件放入到新建文件夾里面，成為它的子目錄，然后關閉項目編輯器，重啟！

注意：不管使用什么編輯器，修改后的包名需要同步到RN項目下的目錄結構，注意層級結構！

-4:運行：

1-：通過CMD命令行來運行lt;項目根目錄gt;：

npm start

react-native run-android:

查看本地服務器是否正常啟動在瀏覽器輸入：

驗證本地服務啟動：http://localhost:8081/index.android.bundle?platform=android

2-:通過Android Studio運行項目：

需要在根目錄執行如下命令：

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

注意：assets文件需要根據具體路徑進行調整，執行本命令之前，需要去檢查文件是否存在，若不存在，則需要新建。

4. 新建項目目錄個別類

1-：

MainActivity是項目新建之后系統默認的一個類，ReactActivity不屬于安卓原生的Activity類；

直接運行APP，此類不能類似原生Activity把頁面展示到手機屏幕上；

package com.keynote.activity;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
    return quot;KeyNotequot;;
}
}

2-：真正意思上Application才是APP的入口，可以在這里進行一些大數據的初始化等其他操作。

實現ReactApplication一些方法，為原生代碼和JavaScript交互提供幫助；

package com.keynote;
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 MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
  return BuildConfig.DEBUG;
}

@Override
protected Listlt;ReactPackagegt; getPackages() {
  return Arrays.lt;ReactPackagegt;asList(
      new MainReactPackage()
  );
}
 };

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

 @Override
 public void onCreate() {
super.onCreate();
SoLoader.init(this,false);
  }
}
[去論壇發表意見]

Tags: ReactNative 安卓開發

文章來源：http://reactnative.cn/post/3322

ads
ads
相關文章
ads

相關文章

ad