剑客
关注科技互联网

React Native 你该了解的 Hello World

这是之前发在公众号的文章,这里忘记同步了。

2013 年 Facebook 开源了 React 框架,去年上半年开源了基于 React 的 React Native 框架 iOS 部分,下半年开源了 Android 部分。目前国内 QQ、天猫、携程、QZone 等都有部分功能用 React Native 开发。

注:以下部分 React Native 以简称 RN 代替,Node 及 Node.js 均表示 Node.js。

限于篇幅,RN 的原理、 RN 与 Native 以及 Hybird 的优劣对比、RN 的页面跳转及 Flexbox 等后面再分享,今天只介绍 RN 的基础开发,让大家能初步了解 RN 开发。

1. 介绍

React 的 GitHub 介绍是:

A declarative, efficient, and flexible JavaScript library for building user interfaces.

简单的说 React 就是一个 JS 库,一个可用于编写 UI 的库。

React Native 的 GitHub 介绍是:

A framework for building native apps with React.

React Native 基于 React,可用来开发 iOS 和 Android 原生应用。

2. React Hello World

React Native 你该了解的 Hello World 上面是 React 示例,是一个简单的 html 文件,其结果是显示 Hello CodeKK。

内容主要分为三部分:

第一部分引入 React JS 文件,跟一般的 JS 文件引入无异。

第二部分是定义一个 HelloMessage 的组件,组件的渲染函数 render 输出一个 div,div 内容接受一个名为 name 的变量。

第三部分是 ReactDOM 将 HelloMessage 组件渲染到 example 这个 DOM 节点(body 内部的 div)中。

上面的第二、三部分是 JSX 语法,这是 Facebook 对 ECMAScript 的扩展,即 JavaScript 语法扩展,基于 XML 样式。非必须,React 也可以直接调用原生 JS。

JSX 语法可以让前端代码可读性更高,同时像 Java Web 的 Velocity 以及 Node 的 Jade 一样支持数据绑定。

通过 React 我们可以让 UI 代码基于组件化开发,可以更好的组合、复用,更方便进行测试和维护。

同时 React 通过 Virtual DOM 提高性能,不直接操作 Real DOM,达到快速渲染的效果。

3. 新建 React Native Hello World

在完成必要软件安装后,命令行运行

react-native init AwesomeProject

新建工程,其中 AwesomeProject 为工程名,在工程目录下运行

react-native run-android

或者

react-native run-ios

分别打包为 Android 或 iOS 应用,编译部署到相应模拟器上运行。

4. React Native Hello World 工程简介

4.1 RN 工程目录

React Native 你该了解的 Hello World

(1) android/ios 文件夹

用于存放 Android/iOS 平台需要单独适配的代码。拿 Android 为例,android 文件夹内部目录结构跟我们一般的 Android 工程一样。

(2) index.android.js 和 index.ios.js 文件

分别为 Android 和 iOS 的启动入口,可以简单理解为 Java 的 Main 或者 Android 的 LAUNCHER & Main Activity。

React Native 可以通过将 .android 及 .ios 放在文件后缀前面作为 Android 及 iOS 的单独适配文件。

如现在需要用到名为 codekk 的图片,图片目录中有 codekk.png 和 codekk.android.png 两个文件,则 iOS 平台会打包 codekk.png,而 Android 平台会打包 codekk.android.png 文件。

(3) package.json

React Native 你该了解的 Hello World

跟 Node 工程类似,用于描述项目的基本信息以及需要的依赖信息,比如默认依赖 React 和 React Native。

RN 也是通过 Node.js 的 npm 做依赖管理。

(4) node_modules 文件夹

自动生成的文件夹,存放 package.json 中配置的依赖的源码以及 bin。

(5) 其他配置文件

.watchmanconfig 为 watchman 的配置文件,watchman 用于监控文件变化,辅助实现工程修改所见即所得。

.flowconfig 为 flow 的配置文件,flow 用于代码静态检查。

.buckconfig 为 buck 的配置文件,buck 是 Facebook 开源的高效编译系统,对 Android iOS 同时适用,通过复用未修改的代码单元、增量编译等提高编译效率。

4.2 index.android.js 内容

index.android.js 和 index.ios.js 文件内容默认一样,如下:

React Native 你该了解的 Hello World

这是一个 js 文件,通过:

react-native run-android

命令运行后,其在 Android 模拟器中运行结果为:居中显示 Welcome to React Native!。

文件内容主要分为三部分:

(1) 引入需要的组件

比如需要 react 中的 Component,需要 react-native 中的 View,跟 Java 以及 C++ 开发类似。

(2) 定义新的组件

继承 Component 定义新的组件,组件的 render 函数返回一个 View,View 内包含一个 Text 控件。

styles 为样式,跟 CSS 类似。

(3) 注册组件

AppRegistry 是运行 RN Apps 的 JS 切入点,App 的根组件需要通过 AppRegistry.registerComponent 注册。

5. React Native 调试

5.1 即时运行

React Native 你该了解的 Hello World 通过 Debug 菜单开启 Enable Hot Reloading 以及 Atom 编辑器的自动保存,可以达到修改代码后自动部署到模拟器的效果。

Live Reload 与 Hot Reloading 类似,只是 Live Reload 之后会重新进入 App 首页,而 Hot 可以在当前页面直接刷新。

如果修改了 android 及 ios 文件夹下的内容或者添加新的图片等无法 Hot Reloading,需要重新运行。

5.2 打日志

通过代码中添加

console.log('response from codekk is :' + response);
 
console.error('error is :' + error);

打印日志。console.warn console.info 等表示其他级别日志。

iOS 日志会打印在 Xcode 中。

Android 需要通过 adb logcat *:S ReactNative:V ReactNativeJS:V 命令在 Terminal 输出日志。

(3) 远程调试

可以跟 JS 或 Node.js 一样在 Chrome Developer Tools 中调试 React Native,在上面 Debug 菜单中选中 Debug JS Remotely,默认会打开 http://localhost:8081/debugger-ui 调试页面,如下图:

React Native 你该了解的 Hello World

6. React Native 基础组件

React Native 基础通用组件包括 Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView 等。

还有只适用于 Android 平台的 DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAndroid 等。

只适用于 iOS 平台的 ProgressViewIOS、SegmentedControlIOS 等。

下面简单以 Image、ListView 为例进行介绍。

6.1 Image 组件

React Native 你该了解的 Hello World

表示显示本地图片 codekk.png。

可以通过文件名后缀前加 @2x 和 @3x 表示不同分辨率图片,如 codekk@2x.png 、codekk@3x.png。

React Native 你该了解的 Hello World

也可以直接显示网络图片。

6.2 ListView 组件

React Native 你该了解的 Hello World 在 render 渲染函数中调用 ListView 控件,有两个主要的属性 dataSource 和 renderRow。

dataSource 表示数据源,为一个数组,在组件构造函数中初始化。

renderRow 表示渲染每行时会调用的函数,入参是 dataSource 中的一个数据,类似 Android 的 getView。

ListView 同样支持分割线、Header 及固定的分块 Header、Footer、滚动监听、到达底部监听等特性。

7. React Native 网络

RN 支持 Fetch、WebSocket、XMLHttpRequest 三种请求方式,其中 Fetch 方式更为常用,以 Fetch 为例:

React Native 你该了解的 Hello World

表示网络获取 http://api.codekk.com/op/page/1 的数据,并转换为 JSON,然后输出。

8. Android、iOS 代码共用

在 4.1 RN 工程目录 的介绍中,我们可以看到分别有 index.android.js 和 index.ios.js 文件,我们看下怎么让 Android 和 iOS 实现简单的代码复用。

将 index.android.js 和 index.ios.js 文件全部改为如下内容:

React Native 你该了解的 Hello World

即让 Android 和 iOS 都调用 index.js,在 index.js 中实现相同启动逻辑。

index.js 内容如下:

React Native 你该了解的 Hello World

在 android、ios 文件夹同级目录下新建 js 目录存放共用代码。

这样 index.js 中示例除 ViewPagerAndroidDemo 和 DrawerLayoutDemo 只在 Android 下运行有效果外,其他 Demo 都可以原封不动运行在 iOS 中。

上面所有代码都在 https://github.com/trinea/react-native-demo 中。

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址