React-Native上手

React.Native 上手（Android 篇）

准备工作：

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

   • 可能会碰到/usr/local目录不可写的权限问题，通过 sudo chown -Rwhoami/usr/local 修复
2. 安装node.js
3. 安装React Native的命令行工具
   • 用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
4. 安装 Android Studio
   • 官网最新版：2.1.2
   • 需要 JDK ,官网挑选合适的平台下载：JDK 下载
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修改内容或者样式，然后重新运行

核心组件示例

先在这里插一句：关于 ES6 的语法

ES6模块系统

ES6模块系统具有以下特性：

1. 使用export关键词导出对象。这个关键字可以无限次使用；
2. 使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块；
3. 支持模块的异步加载；
4. 为加载模块提供编程支持。

一、我们需要修改的 index.android.js 的开头就是引入模块

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

二、构建入口类

里面有 render 方法用来渲染视图，还有 return 用来返回视图模板代码。

class AwesomeProject extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

三、定义视图样式

1. 用 StyleSheet.create 创建视图

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  bgimg: {
    width: 100,
    height: 100,
  },
  ipt: {
    width: 100,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

1. 引入视图样式

style={styles.container}.其中style是视图的一个属性，styles是我们定义的样式表，container是样式表中的一个样式

四、注册应用入口

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

• View 组件 View 组件类似于容器，里面可以包含其他基本组件，View是对不同目标平台基础视图控件的抽象封装

  其他基本组件放在 View 组件中，可以更好的控制样式

    <View style={styles.container}>
      <TextInput style={styles.ipt} 
        placeholder="input here" 
      />
      <Image style={styles.bgimg} source={require('./img/background.png')} />
      <Text style={styles.instructions}>
        To get started, edit index.android.js
      </Text>
  </View>

  可以看到 上面这个 View 组件中包含了 TextInput,Image,Text 三个组件

• Text 组件 Text 用来显示文本，是最基本的组件了

  i. 首先引入 Text 模块

  import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  } from 'react-native';

  ii. 然后定义视图模板

  <Text style={styles.instructions}>
    To get started, edit index.android.js
  </Text>
  

  iii. 定义视图样式

  instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  },

  然后重新运行下，就能看到效果了

• image 组件 image 组件用来显示图片

  同样的，先引入 Image 模块

  import {
    AppRegistry,
    Image,
    StyleSheet,
    Text,
    View,
  } from 'react-native';
  

  定义 Image 视图，在 Image 的 source 属性中指定图片

  <Image style={styles.bgimg} source={require('./img/background.png')} />
  

还有一些基本组件就不一一介绍了，总结一下：

1. 先要引入组件模块
2. 定义组件视图
3. 定义组件样式

其中，一开始，我忽略了第三步，想着直接把代码跑起来，看看效果，结果由于没有定义样式，重新运行之后，看不到效果，比如 Image 组件，必须定 宽、高，才能看到

入门完成

到了这一步，我们算是完成了 React-Native 的入门工作