React-Native上手

阅读数:1125 发布时间:2016-07-07 07:24:15

作者:zzl005 标签: 朱忠来005 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
  5. 如果缺少 Android SDK,也需要自行下载

android studio 安装

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

SDK Manager 配置

SDK Tools

环境变量配置

推荐安装的工具

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

其他可选安装

其他

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

正式开始

测试安装

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

然后你会发现终端里执行了一大段代码后,虚拟设备上成功安装了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);

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

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

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

入门完成

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

相关文章推荐: