008-React-Native-Android-打包,修更名稱圖標(轉載)

一： 前言

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

二： 目錄結構

--1:新建一個React-native項目，並把項目分別導入到VSCode中，目錄以下：

AndroidManifest.xml:清單文件
1-：權限控制<上網權限等>
2-：Activity和Service等須要註冊

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.keynote"
android:versionCode="1"
android:versionName="1.0">

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

<uses-sdk
    android:minSdkVersion="16"
    android:targetSdkVersion="22" />

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".activity.MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>

從這個文件中能夠看出：
1-：安卓應用的包名：package="com.keynote"
2-：安卓APP的版本號：android:versionCode="1"
android:versionName="1.0"
3-：權限：上網權限和系統彈出框權限

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

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

<uses-sdk
    android:minSdkVersion="16"
    android:targetSdkVersion="22" />

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

android:label="@string/app_name"

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

android:icon="@mipmap/ic_launcher"

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

android:theme="@style/AppTheme"

8-：原生應用的啓動的第一個Activity<此處名字是：MainActivity>

<activity
    android:name=".activity.MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>

9-：調試，能夠在正式發佈時進行刪除：

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

--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 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);
 }
}
-4:關於build.gradle:
Android Studio是經過Gradle來管理第三方。因此，咱們須要熟悉基本的配置信息；
在安卓目錄下，存在兩個build.gradle文件，一個是根目錄，一個存在在APP包下面的；
存在APP目錄下的build.gradle：

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

defaultConfig {
    //應用包名
    applicationId "com.keynote"
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName "1.0"
    //ndk開發時支持的芯片
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

//依賴的第三方包
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+"  // 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:<也能夠經過setting設置路徑>
在項目目錄下的：local.propertis中：
ndk.dir=/Users/erhu/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/erhu/Library/Android/sdk

三：開發常見需求

-1：修改APP名字<一些使用文件的目錄>
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="@string/app_name"

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

 <string name="app_name">AwesomeProject</string>

7與8，須要保證一致！
若只是想修改應用的名字，直接執行7，8便可！把AwesomeProject修改爲你想要的名字。

-2：圖標
1--確認
android/app/src/main/res/mipmap--xxx,
或者
android/app/src/main/res/drawable--xxx
每個目錄下有不一樣大小的圖標-- xxx.png<適配安卓不一樣機型>
2--android/app/src/main/AndroidManifest.xml
當放入的是mipmap,

android:icon="@mipmap/xxx"

當放入的是drawable

android:icon="@drawable/xxx"

-3：包名：
android/app/src/main/AndroidManifest.xml

package="com.awesomeproject"

修改包名以下：
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 = "packagename";

注意觀察目錄結構
假設以前包名爲「aaa.bbbbbb」,在編輯器裏分爲兩層，而在Android Studio編輯器裏面只有一層；
當你要把包名修改爲「aaa.bbbbbb.ccc」的時候，須要在編輯器裏，新建一個文件夾名字爲「ccc」,把以前在「bbbbbb」目錄下的文件放入到新建文件夾裏面，成爲它的子目錄，而後關閉項目編輯器，重啓！

注意：無論使用什麼編輯器，修改後的包名須要同步到RN項目下的目錄結構，注意層級結構！

-4:運行：
1-：經過CMD命令行來運行<項目根目錄>：
npm start
react-native run-android:

查看本地服務器是否正常啓動在瀏覽器輸入（一般用來檢查Package是否正常）：

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

2-:經過Android Studio運行項目（進行js資源打包）：
須要在根目錄執行以下命令：

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文件須要根據具體路徑進行調整，執行本命令以前，須要去檢查文件是否存在，若不存在，則須要新建

四： 項目目錄介紹

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 "KeyNote";
}
}

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

五：打包發佈App

見另外一篇文章 http://www.cnblogs.com/qiyecao/p/8358191.html