React Native基础

最新推荐文章于 2023-03-26 17:12:37 发布

wh义华

最新推荐文章于 2023-03-26 17:12:37 发布

阅读量201

点赞数

分类专栏： react-native 文章标签： react-native

本文链接：https://blog.csdn.net/honeysx/article/details/77187459

版权

react-native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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组件则可以构建丰富的界面。