文档分值：0

React-Native >>> React-Native >>> 基础入门

课程目录

基础入门
公共通用组件
iOS特有组件
android特有组件
与iOS原生混合
与android原生混合
安装与调试--针对Android平台

准备工作：

  1. 安装包管理器 homebrew (Mac 包管理器)

    • 可能会碰到/usr/local目录不可写的权限问题，通过 sudo chown -Rwhoami/usr/local 修复
  2. 安装node.js
  3. 安装React Native的命令行工具
    • 用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
  4. 安装 Android Studio
  5. 如果缺少 Android SDK，也需要自行下载

android studio 安装

  • 到了这一步的时候，官网推荐 Custom 方式安装，但我之前也没有看到这一步，就直接选择了 Standard 方式安装，后来也能跑起来，证明这里的区分不是那么大。

SDK 相关(镜像，支持库等)

SDK Manager 配置

  • 按照官网所说的，勾选相关的系统镜像和 Android 版本等就可以

SDK Tools

  • 必须选择 Android SDK Build-Tools 23.0.1

环境变量配置

  • 这个环节很重要，也很容易犯错，我自己配置的过程中，一开始出现了问题。注意原因是，我本机的 Android SDK 是自己下载的，所以 Android SDK 的目录和官网上的不同，而且我用的不是默认的 bash ,而是 zsh，所以，我在这里发一下我本机的配置，供大家参考

  • 我用的 zsh ，所有我直接修改 .zshrc，在末尾添加下面两行，我的 sdk 目录为：/Users/abc/android-sdk-macosx

    #    /usr/local/opt/android-sdk，这一行是注释，不重要        
export    ANDROID_HOME=/Users/abc/android-sdk-macosx
  • 然后，使用下面这个命令令其立即生效：
    • source /Users/abc/.zshrc

推荐安装的工具

Watchman,Flow 等，自行选择是否安装，反正我是安装了

还需将Android SDK的中的两个目录添加到环境变量中

还是上面说的那个问题，我的 Android SDK，是自己下载的，所以所在目录和官网不太一样，这里还是发一下我的配置 

#    Your    exact    string    here    may    be    different.        
PATH="/Users/abc/android-sdk-macosx/tools:/Users/abc/android-sdk-macosx/platform-tools:${PATH}"        
export    PATH

关于Gradle Daemon 的安装

官网上说：

开启Gradle Daemon可以极大地提升java代码的增量编译速度

经过我的测试，这是真的，确实快了非常多。

但是官网只是给了一个链接，这里我说下我的安装过程，非常简单。

（Unix 系的）直接在 终端默认目录下面： 

touch    ~/.gradle/gradle.properties    &&    echo    "org.gradle.daemon=true"    >>    ~/.gradle/gradle.properties

其他可选安装

  • 官网在最后还推荐了一些可选安装，其中 git 就不说了，相信肯定在这之前就已经安装好了。至于 Nuclide ，我觉得还是要看你习惯用什么编辑器，如果你习惯用 Sublime Text，那就完全没必要安装这个。
  • 模拟器 Genymotion ，根据我的经验 Genymotion 这个第三方模拟器，性能确实比原生的模拟器好一些，但是这里有两点需要注意：
    1. Android studio 版本号跨入 2.0 以后，原生模拟器的性能已经有了相当的改善；
    2. Genymotion 安装过程中，可能会出现一些问题，而且会占据额外的硬盘空间。所以，大家可以尝试 使用下 Genymotion ，但也不必特别执着。就普通调试来说，原生的模拟器也差不多够用了。

其他

官网上面提到了一个创建虚拟设备的时候，可能会有 bug ,我都是直接手动创建。也就没有遇到这类问题。

正式开始

测试安装

这里需要先创建一个 Hello world 项目，来看看之前的配置是否有问题。
说明下：
在开始创建之前，我先用模拟器打开了一个虚拟设备

  • 先初始化一个叫做 AwesomeProject 的项目
    • react-native init AwesomeProject
  • 然后切换到这个项目的目录下
    • cd AwesomeProject
  • 编译运行下
    • react-native run-android

然后你会发现终端里执行了一大段代码后，虚拟设备上成功安装了AwesomeProject这个 apk 。

注：
如果发现报错，看下是否是 gradle 版本的问题，修改 gradle 版本是在 ：
AwesomeProject/android/gradle/wrappergradle-wrapper.properties

的distributionUrl=https://services.gradle.org/distributions/gradle-2.10-all.zip 这一行

修改运行

打开项目文件中的 index.android.js修改内容或者样式，然后重新运行

[ 该条目创建时间：2016-06-25 17:09:51 ]