React-native Android打包生成Apk

环境搭建

http://reactnative.cn/docs/0.50/getting-started.html (react-native官网)

1. 安装JDK

• 从Java官网下载JDK并安装 (安装成功后CMD打开命令行输入 java -version检查是否安装成功)
• 环境变量配置

JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

JAVA_HOME

CLASSPATH

2. 安装Android SDK

• 官网链接AndroidDevTools

• 安装完成后在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

  
  
  

• 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。==（必须是这个版本）==

  
  
  

• 配置ANDROID_HOME环境变量

  
  
  

3. 安装NodeJS

• 从官网下载node.js
• 可使用node -v的命令来测试NodeJS是否安装成功

4. 安装git

• git下载地址
• 在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中。

5.安装Python

从官网下载并安装python 2.7.x（3.x版本不行）

6.测试安装

   react-native init AwesomeProject   (初始化一个react-native的项目,这个名字要慎重,影响到之后再小米应用商店的发布)
   cd AwesomeProject
   react-native run-android

项目结构

1. Android app项目在 coding 8lab_devApp项目下的android分支
2. Index.android.js是文件入口
3. static里面放的是项目中用到的图片
4. src目录下是项目的js代码
5. custom/pxToDp.js 是将ui给出设计图的px像素转换成手机设备的dp设配各种手机
6. component/url.js 是各个请求都已经给出注释

React-native的样式

我们在web开发中 使用的是css来写样式,在react-native中直接写在js文件就可以了,
React-native 默认使用flex布局, 并且flex-direction 默认为column

1. 可以把样式写在行内
2. 使用StyleSheet.create来集中定义组件的样式,然后就可以多次引用了

3. 你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
4. 语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

路由控制

官方推荐 React-navigation来控制路由 https://reactnavigation.org/

• Android 默认的跳转方式很别扭 让安卓实现类似iOS的push动画

  
  
  

• 2 跳转页面

 navigate('Detail',{
              title:'图片详情',
              url:item.url,
         });

在StackNavigator中注册的页面，需要一一对应，才能跳转到相应的页面
在跳转的页面可以通过this.props.navigation.state.params.title获取到这个参数。当然这个参数可以随便填写，都可以通过this.props.navigation.state.params.xxx获取。

• 3 清除跳转记录
  使用reset方法,现在跳转到Login页面,并清除之前所有的记录

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Login' }),
]
})
this.props.navigation.dispatch(resetAction)

开发调试

1. 实时刷新
   打开摸机器后 win+M 键可以调出这个界面, 点击Enable Hot Reloading 就可以实时的看到你修改完代码的内容
2. 调试信息
   可以选择在Js代码中 alert(‘test’)来查看调试信息
   也可以去谷歌商店下载 React Developer Tools ,然后在模拟器里 win+M后点击 Debug Js Remotely,之后会自动打开谷歌浏览器, F12后就可以看到console.log()信息了

打包发布

1, 产生签名的key

该过程会用到keytool，开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具

在项目的主目录中执行：

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然后就会出现下图

没啥说的只想告诉大家最后一步,一定要输入个是~

现在自己看你的项目跟目录发现多了一个 my-release-key.keystore文件

[注：在产生的时候需要提供密钥和存储密码，后续会用到]

2, 设置gradle变量

1.把my-release-key.keystore文件放到你工程中的android/app文件夹下。
2.编辑 android/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=xx 
MYAPP_RELEASE_KEY_PASSWORD=xx
** [注意替换xx为你自己设置的密钥和存储密码]**

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

3, 添加签名到项目的gradle配置文件

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

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file("my-release-key.keystore文件的绝对路径")
            storePassword  "密钥密码"
            keyAlias "my-key-alias" 
            keyPassword "存储密码"
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

4,生成发行APK包

$ cd android && ./gradlew assembleRelease
然后就可以在下图目录中找到apk文件了

apk

==注意每次打包新的apk时候要删除之前的!!!==