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只包括真正产生了状态变化的部分。

跨平台开发框架

优点；

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

设计理念：既拥有Native的用户体验，又保留React的开发效率！

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

ReactNative提供了那些能力

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

项目结构

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

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是这个规范的子集。

解决问题

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

ES6语法问题

深入浅出ES6（十四）：let和const

问题：首页白屏

ReactNative安卓首屏白屏优化

react-native学习列表

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

图形动画

视图

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活动经验分享