React-Native官方的介绍:

  • React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

  • React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。

  • Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

动图

接下来为大家奉上开发React-Native应用的流程。

开发环境

  • windows 10 专业版 1607
  • Node 7.3.0
  • Android Studio 1.5
  • Java Development Kit 1.8.0_73
  • Python 3.6

一、 首先安装 react-native-cli

1
npm install -g yarn react-native-cli

二、 测试安装(Project在这里代指工程目录名,可自行设定，最好为纯英文目录)。

1
2
3
4
5
react-native init Project
cd Project
react-native run-android

有时运行上述代码后Packager可能不会自动运行，或者运行过程中断，这时运行以下代码:

1
react-native start

三、 现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

  • 把Project\android\app\build\outputs\apk目录中生成的APP安装到安卓虚拟机或者手机中

  • 在安卓模拟器OR你的手机App中设置IP后就可以看到效果了

    打开APP后通过 手机摇一摇 或者 点击设置建，调出如下图设置菜单，点击Dev Settings选项。

    图

    进入设置页面，点击Debug server host选项，输入 YouIP:8081保存到主页面菜单再点击Reload即可。

    图

  • 使用你喜欢的代码编辑器打开index.android.js并随便改上几行,并在APP中Reload即可看到页面效果。

四、 接下来就是开发过程需要注意的

  • 逻辑代码使用ES6语法。

  • 页面使用FlexBox布局。

  • 若想将图片打包到app内，需要将文件放到 Project\android\app\src\main\res\drawable-xhdpi 目录下，
    并且引用的时候在Image加上source属性

    1
    source={{uri:'文件名'}}

五、 把制作完成的APP打包

测试版打包:

1
react-native run-android

正式版打包:(需要设置签名)

  1. 切换到react-native工程根目录，先生成秘钥文件

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

  2. 需要把刚生成的秘钥文件copy到android/app下

  3. 修改android/gradle.properties, 在最后面添加如下内容:

    1
    2
    3
    4
    MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
    MYAPP_RELEASE_KEY_ALIAS=my-key-alias
    MYAPP_RELEASE_STORE_PASSWORD=123456 //刚才生成秘钥时设置的密码
    MYAPP_RELEASE_KEY_PASSWORD=123456     //刚才生成秘钥时设置的密码

  4. 在 android/app/build.gradle文件里面修改

    图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        signingConfig signingConfigs.release
    }
}

  1. 在项目根目录输入(服务开启情况下)

    1
    curl "http://localhost:8081/index.android.bundle" > android/app/src/main/assets/index.android.bundle

  2. 启动代码混淆
    Proguard 是一个 Java 字节码混淆压缩工具，可剔除项目文件夹中未使用的部分，有效减少APK的大小。在 build.gradle 文件中，启动 Proguard模块:

    1
    def enableProguardInReleaseBuilds = true

  3. 修改app图标
    将制作好的图标放入android/app/src/res/drawable***/

  4. app名称修改
    在android/app/src/main/res/values/string.xml中修改

    1
    <string name="app_name">唯品购</string>

  5. 进入Android目录并开始打包

    1
    2
    3
    cd android
    .\gradlew assembleRelease

  6. 打包完成
    进入Project\android\app\build\outputs\apk目录即可看到打包好的app-release.apk文件。