React Native基础

1、简介

1.1、React概念

React是facebook提出的一个Javascript库,其核心在于快速的构建用户界面。其官方介绍为:
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。

1.2、React特点

1.2.1、虚拟DOM

React与Javascript不同的是,React提出了虚拟DOM的概念。在Javascript里,更新视图时,需要清空DOM容器中的内容,然后将新的DOM和数据添加到容器。
而React将视图的变化放在内存进行比较,即比较保存在内存中的虚拟DOM。当视图发生变化时,React通过比较虚拟DOM计算出差异部分,得到最小更新视图,从而提高性能,加快渲染速度。

1.2.2、JSX语法

在React中提出了JSX语法,类似xml的语法(an XML-like syntax)。该语法能在Javascript代码中编写类似xml的标签语句来操作和构建html界面,其目的在于提高效率及增加代码可读性。

示例代码:

<script type="text/babel">
  var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello, React</h1>;
      }
  });
  React.render(<HelloMessage />, document.getElementById('example'));
</script>

从示例可以看出,该段javascript代码中包含了html代码及其他标签语句。这样的语法简化了DOM操作页面元素的过程。
但JSX语句只能直观的看到DOM的结构,它并不能直接在浏览器运行。React内部会对JSX语法进行处理,还原成Javascript和HTML代码。
所以,编写完全不使用的JSX语法的React代码是允许及可行的。

1.3、React Native概念

React Native是基于React设计,目的在于用React来构建原生应用,提高开发效率。其官方介绍为:
A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT。

2、React Native开发环境及项目创建

使用React Native开发原生App应用,需要Node.js的支持(Node.js简介)。
在安装过程中会提示需要Node.js 4.0及以上的版本支持,所以需要注意版本的选择,在开发过程中出现问题时需要考虑是否是版本问题。(Node.js版本可以通过nvm工具管理)
官网也建议安装Watchman(A file watching service)。

2.1、安装react-native-cli命令行工具

通过如下命令

$sudo npm install -g react-native-cli

其中npm是Node.js管理模块的一个命令工具,会跟随Node.js的安装而附带安装。-g表示全局安装,react-native-cli是react native的命令工具。

2.2、创建项目

安装完react-native-cli工具后,则可以通过命令来创建项目。
通过如下命令

$react-native init AwesomeProject

创建一个名称为AwesomeProject的项目。项目结构如下:
项目结构图
ios可以通过Xcode打开./AwesomeProject/ios/AwesomeProject.xcodeproj文件导入ios项目,android可以通过Android Studio导入android目录导入工程。
React Native代码ios和android分别存放在index.ios.js和index.android.js文件中。

2.3、运行项目

通过如下命令可以运行项目
(cd AwesomeProject,确保当前目录为AwesomeProject)

$react-native run-ios // 运行ios

$react-native run-android // 运行android

在通过命令运行android时,会启动一个packager server的终端。
其次,可以将项目到导入到Xcode或者Android studio等IDE,点击run进行运行。android需要提前启动package终端,否则会报错。

2.4、代码释义

代码文件参见附件,此处以index.android.js为例。

2.4.1、导入react相关模块
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
2.4.2、创建组件AwesomeProject
export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Hello,React Natve Study Group!!!
        </Text>
      </View>
    );
  }
}

其中系统回调方法render负责具体的UI绘制,return返回的是一个视图树,从中可以看到使用了React中定义的UI组件。

2.4.3、CSS样式设置
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

在React Native中通过StyleSheet.create方法来创建css。在UI组件中通过style属性引用样式,也可以类似css直接将样式以属性方式书写。
其中,需要注意的是React native中样式的书写与css的区别。在React native中需要将样式名称以驼峰的形式书写,例如在React native中
用backgroundColor定义背景色,而在css中则为background-color。

2.4.4、将内容渲染到页面
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

将自定义的AwesomeProject组件注册到容器,从而调用组件的render方法显示UI。

3、常用组件

View是构建UI的最基础组件,它是一个容器,可以容纳其他的UI组件。Text是一个展示文本的组件,类似android中TextView。
其他的如Button,ListView,ScrollView,TextInput等,都是构建UI的基础组件,具体用法及更多组件参见官网的Components部分。使用React Native提供的UI组件则可以构建丰富的界面。

4、总结

4.1、React是一个用于构建界面的Javascript库,而React Native是基于React,用web思维来构建原生应用的框架。
4.2、使用React Native需要Node.js支持。

5、常见问题

在android真机上运行时,如果出现Unknown failure ([CDS]close[0])错误,则是由于gradle版本过高引起的。可以通过降低gradle版本解决,也可以通过如下方式解决
adb devices
查询出android设备号
然后利用如下命令运行

react-native run-android –deviceId xxx

6、参考网址

react
react native
Node.js维基百科
网络博客
JSX语法
Watchman

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章