React Native初探

  自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

React Native初探

ReactNative是Facebook在2015年React开发者大会上公开的应用开发框架,一个可以用React开发原生应用的框架。

技术背景

FaceBook => HTML5、NativeApp
HybridApp => Native + Web 混合模式

特点:

JSX语法(扩展的JS语法)、组件化模式、Virtual Dom、DataBinding单向数据流、可以实现Chrome的调试

基本模式:

每个React应用可视为组件的组合,而每个React组件由属性(Property)和状态(state)来配置,当状态发生变化时更新UI,组件的结构是由虚拟的DOM来维护,确保了实际更新的DOM只包括真正产生了状态变化的部分。

同类型的代码:

GoogleSky、Titanium、NativeScript(太重)、鸟巢(支付宝)、BeeFrameWork
综合起来:强大的社区,简单的学习,简单的开发、简单的应用。

跨平台开发框架

优点;

  1. 跨平台、兼容web、ios、android三大主流平台
  2. React调用原生控件,性能优于H5框架
  3. 更好的手势识别
  4. 实时部署更新,再也不用担心应用市场审核缓慢

设计理念:既拥有Native的用户体验,又保留React的开发效率!

Facebook官方使用React Native开发的应用:Groups、Ads Manager、F8、Adverts Manger、天猫IPad、Chinese Flashcards

ReactNative提供了那些能力

  1. 基于原生UI组件
  2. 手势识别
  3. 基于FlexBox的CSS布局模式
  4. 跨平台开发
  5. 基于React、jsx组件化开发模式

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
ReactNative     (项目名称)
|–node_modules node模块
|–react-native ReactNative引用工程文件
|–app app页面
|–index.android.js android工程备份
|–index.ios.js ios工程备份
|–index.android.js android工程(开发文件)
|–index.ios.js ios工程(开发文件)
|–android android项目
|–ios ios项目
|–*.xcodeproj Xcode启动文件
|–package.json 工程信息数据

注:android与ios有什么区别?
关于android与ios开发,大部分只要将开发好的文件相互拷贝,修改android与ios独有的部分控件即可。整体的逻辑思路保持一致即可。

设备调试工具

摇晃设备或按Menu键

chance 选项
Reload 刷新
Debug Js Remotely 远程调试js
Enable Live Reload 启动实时刷新
Enable Hot Reloading 启动热刷新
Toggle Inspector 标签调试
Show Perf Monitor 显示性能监视器
Capture Heap
Start/Stop Sampling Profiler 启动/停止检测器
Dev Settings 设备设置

Debug Js Remotely js远程调试

此时,会打开页面调试Tab页面Tab页面,可以用浏览器访问android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)

Enable Live Reload 启动实时刷新

Enable Hot Reloading 启动热刷新

React Native 热加载(Hot Reload)原理简介

Toggle Inspector 标签调试

Show Perf Monitor 显示性能监视器

Capture Heap

Start/Stop Sampling Profiler 启动/停止检测器

Dev Settings 设备设置


Bebugging 调试
Debug server host & port for device 调试服务器主机和端口

1
2
3
adb devices 查询设备ID

adb reverse tcp:8081 tcp:8081

提示信息

应用内的错误与警告提示(红屏和黄屏)#红屏或黄屏提示都只会在开发版本中显示,正式的离线包中是不会显示的。

React Native调试技巧与心得

简单的列表Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image,
} from 'react-native';

export default class luumans extends Component {
render() {
return (
<ScrollView style={styles.container}>
<Image
source=
{{uri: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20161013/2a7bf0a0-d94d-40d4-a244-20e5a5e359e6.jpg'}}
style={styles.images}
/>

<Text style={styles.title}>『微信小程序』从基础到实战</Text>
<Text style={styles.teacher}>勾股</Text>
<Text style={styles.time}>2013-07-11</Text>
<Image
source=
{{uri: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-59b4a27d-e431-4f49-aa25-6b94cccd8229.jpg'}}
style={styles.images}
/>

<Text style={styles.title}>基于Go语言的短链接服务实战</Text>
<Text style={styles.teacher}>小鱼</Text>
<Text style={styles.time}>2013-07-11</Text>
<Image
source=
{{uri: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-0da69660-4fcc-45d1-9b84-88271851f57f.jpg'}}
style={styles.images}
/>

<Text style={styles.title}>基于Python的静态爬虫实战</Text>
<Text style={styles.teacher}>飞雪</Text>
<Text style={styles.time}>2013-07-11</Text>
</ScrollView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F2F2F2',
margin: 5,
borderWidth: 1,
borderColor: '#d2d2d2',
},
title: {
fontSize: 15,
marginLeft: 10,
color: '#333333',
textAlign: 'left',
},
images: {
height: 200,
margin: 10,
},
teacher: {
fontSize: 13,
marginLeft: 10,
color: '#525252',
textAlign: 'left',
},
time: {
fontSize: 13,
marginLeft: 10,
color: '#2d854a',
textAlign: 'left',
},
});


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

列表控件Listview:

Flexbox布局

什么事Flexbox

Flexbox是css 3中引入的布局模型“弹性盒子模型”,通过弹性的方式来对齐和分布容器中的内容空间,使其能够适应不同屏幕的宽度。React Native中Flexbox是这个规范的子集。

解决问题

浮动布局
不同宽度屏幕的适配
宽度自动分配
水平垂直居中

相关资料:

facebook/react-native
A Complete Guide to Flexbox
react-native 之布局篇
flexbox-CSS3弹性盒模型flexbox完整版教程
React-Native之flexbox布局篇
React Native专题
React Native专题

Flexbox in the CSS specifications
Flexbox at MDN
Flexbox at Opera
Diving into Flexbox by Bocoup
Mixing syntaxes for best browser support on CSS-Tricks
Flexbox by Raphael Goetter (FR)
Flexplorer by Bennett Feely
http://devbryce.com/site/flexbox/
http://css.doyoe.com/properties/flex/index.htm
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
样式测试

ES6语法问题

深入浅出ES6(十四):let和const

问题:首页白屏

ReactNative安卓首屏白屏优化

react-native学习列表

收集了react-native一些学习资源,列表会继续更新,大家有好的资源欢迎Pull Requests!

官方文档

React Native
React Native 中文网
官方视频
react-native学习列表
React-Native入门指南
整理了一份React-Native学习指南
深入浅出 React Native:使用 JavaScript 构建原生应用

React Native系列文章
React Native系列文章
React Native中文社区
天猫前端

React-native组件库
React Native Modules

react-native-desktop
react-native-code-push
react-native-invoke

相关书籍

ECMAScript 6入门
React/React Native 的ES5 ES6写法对照表

教程

awesome-react-native
Airbnb JavaScript Style Guide 中文版
React 入门实例教程-阮一峰
ReactJS中文文档
react-native-guide
React-Native-lesson
ReactNativeDemo
npm模块管理器
快速入门-Grunt中文网
Redux 中文文档
reactjs.cn - Flux应用架构
cnsnake11研究react-native的blog
Facebook F8App-ReactNative项目源码分析系列
React Native 学习笔记
构建 F8 App / React Native 开发指南
React Native:移动开发时代的巴别塔 - 专题分享

文章

一个完整的Flexbox指南
组件的详细说明和生命周期(Component Specs and Lifecycle)
JSX 中的 If-Else

组件间的通信
mozilla-闭包
npm的package.json中文文档
快来使用ECMAScript 2015吧
React-Native学习技术的三部曲
新手理解Navigator的教程
React/React Native 的ES5 ES6写法对照表

一个“三端”开发者眼中的React Native
“指尖上的魔法” – 谈谈React-Native中的手势
ReactNative的组件架构设计
在react-native中使用redux
怎么样桥接一个objective-c的视图组件

事件

安卓Back键的处理·基本+高级篇

音视频相机

React Native 实现二维码扫描
react-native-barcodescanner
react-native-camera
react-native-image-picker

图形动画

视图

react-native-button
react-native-scrollable-tab-view

listview

react-native-sglistview
react-native-tableview

项目

Demo

HTML5 CSS3 code sample
react-native-hybrid-app-examples
react-native-redux-demo
react-native中使用redux

Design

React-Native-Gank
f8app
react-native-todo
noder-react-native
FinanceReactNative
react-native-nw-react-calculator

Mode

react-native-swiper

工具

开源的react-native IDE
rnpm
react-native-vector-icons
redux
react-redux
redux-thunk
redux-persist
alt

携程技术中心React Native Meetup活动经验分享

文章目录
  1. 1. React Native初探
    1. 1.1. 技术背景
    2. 1.2. 特点:
    3. 1.3. 基本模式:
    4. 1.4. 同类型的代码:
    5. 1.5. 跨平台开发框架
    6. 1.6. ReactNative提供了那些能力
  2. 2. 项目结构
    1. 2.1. 设备调试工具
      1. 2.1.1. Debug Js Remotely js远程调试
      2. 2.1.2. Enable Live Reload 启动实时刷新
      3. 2.1.3. Enable Hot Reloading 启动热刷新
      4. 2.1.4. Toggle Inspector 标签调试
      5. 2.1.5. Show Perf Monitor 显示性能监视器
      6. 2.1.6. Capture Heap
      7. 2.1.7. Start/Stop Sampling Profiler 启动/停止检测器
      8. 2.1.8. Dev Settings 设备设置
      9. 2.1.9. 提示信息
      10. 2.1.10. 简单的列表Demo
  3. 3. Flexbox布局
    1. 3.1. 什么事Flexbox
    2. 3.2. 解决问题
    3. 3.3. 相关资料:
  4. 4. ES6语法问题
  5. 5. 问题:首页白屏
  6. 6. react-native学习列表
    1. 6.1. 官方文档
      1. 6.1.1.
    2. 6.2. 相关书籍
    3. 6.3. 教程
    4. 6.4. 文章
      1. 6.4.1. 事件
      2. 6.4.2. 音视频相机
      3. 6.4.3. 图形动画
      4. 6.4.4. 视图
      5. 6.4.5. listview
    5. 6.5. 项目
      1. 6.5.1. Demo
      2. 6.5.2. Design
      3. 6.5.3. Mode
    6. 6.6. 工具
,