008-React-Native-Android-打包,修改名称

2017-06-29 本文已影响1331人 Time_情书

本人提供 React-Native技术服务，坐标杭州余杭区文一西路智能小镇，限时周六周日，免费。

一：前言

React-native是目前最火的一种APP混合开发语言。本文旨在帮助一些不熟悉安卓原生开发的程序员快速熟悉安卓目录结构。
使用工具：
js--WebStorm;
安卓原生--Android Studio;

二：目录结构

--1:新建一个React-native项目，并把项目分别导入到WebStorm，Android Studio中，目录如下：

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

1-：生成一个签名密钥
你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中（比如C:\Program Files\Java\jdkx.x.x_x\bin），你可能需要在命令行中先进入那个目录才能执行此命令。在mac上，直接进入项目根目录输入一下命令：

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

在运行上面这条语句之后，密钥库里应该已经生成了一个单独的密钥，有效期为10000天。--alias参数后面的别名是你将来为应用签名时所需要用到的，所以记得记录这个别名。

注意：请记得妥善地保管好你的密钥库文件，不要上传到版本库或者其它的地方。

2-：设置gradle变量
把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）
注意：~表示用户目录，比如windows上可能是C:\Users\用户名，而mac上可能是/Users/用户名。

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
上面的这些会作为全局的gradle变量

关于密钥库的注意事项:
一旦你在应用市场（应用宝，360等）发布了你的应用，如果想修改签名，就必须用一个不同的包名来重新发布你的应用（这样也会丢失所有的下载数和评分）。所以请务必备份好你的密钥库和密码。

3-：添加签名到项目的gradle配置文件
编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：

android {
...
defaultConfig { ... }
signingConfigs {
    release {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
    }
}
buildTypes {
    release {
        ...
        signingConfig signingConfigs.release
    }
}
}

4-：生成发行APK包
只需在终端中运行以下命令：

$ cd android && ./gradlew assembleRelease

译注：cd android表示进入android目录（如果你已经在android目录中了那就不用输入了）。
./gradlew assembleRelease在macOS、Linux或是windows的PowerShell环境中表示执行当前目录下的名为gradlew的脚本文件，且其运行参数为assembleRelease，注意这个./不可省略；而在windows的传统CMD命令行下则需要去掉./。

Gradle的assembleRelease参数会把所有用到的JavaScript代码都打包到一起，然后内置到APK包中。如果你想调整下这个行为（比如js代码以及静态资源打包的默认文件名或是目录结构等），可以看看android/app/build.gradle文件。

生成的APK文件位于android/app/build/outputs/apk/app-release.apk，它已经可以用来发布了。

5-：测试应用的发行版本

$ cd android && ./gradlew installRelease

注意installRelease参数只能在你完成了上面的签名配置之后才可以使用。你现在可以关掉运行中的packager了，因为你所有的代码和框架依赖已经都被打包到apk包中，可以离线运行了。

在debug和release版本间来回切换安装时可能会报错签名不匹配，此时需要先卸载前一个版本再尝试安装。

6-：启用Proguard代码混淆来缩小APK文件的大小（可选）
Proguard是一个Java字节码混淆压缩工具，它可以移除掉React Native Java（和它的依赖库中）中没有被使用到的部分，最终有效的减少APK的大小。

重要：启用Proguard之后，你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原生库做一些额外的配置。参见app/proguard-rules.pro文件。

要启用Proguard，设置minifyEnabled选项为true：

 /**
* 在release发行版中启用Proguard来减小 to shrink the Java    bytecode in release builds.
*/
def enableProguardInReleaseBuilds = true

个人建议：若是你的项目因为添加此属性无法运行，则删除此配置。因为，这个真的会导致各种奇怪的问题。

008-React-Native-Android-打包,修改名称

一：前言

二：目录结构

三：开发常见需求

四：项目目录介绍

五：打包发布App

猜你喜欢

热点阅读

008-React-Native-Android-打包,修改名称

一： 前言

二： 目录结构

三：开发常见需求

四： 项目目录介绍

五：打包发布App

猜你喜欢

热点阅读

一：前言

二：目录结构

四：项目目录介绍