zoukankan      html  css  js  c++  java
  • React Native移动开发实战

    React Native移动开发实战

    1 React Native入门

    1.1 React Native基本知识

    1.1.1 React简介
    虚拟DOM(Virtual DOM)
    Components组件
    数据流(Data Flow)
    JSX语法
    1.1.2 React Native简介
    APP占用体积小
    实现跨平台开发
    相对成熟的技术
    支持动态更新
    1.1.3 React Native工作原理
    虚拟DOM和MVVM的对比

    1.2 React Native与其他跨平台技术的对比优势

    1.2.1 Web流
    1.2.2 代码转换流
    将Java转成Objective-C
    将Objective-C转成Java
    XMLVM
    1.2.3 编译流
    C++方案
    Xamarin
    Go
    1.2.4 虚拟机流
    Java虚拟机
    Titanium/Hyperloop
    React Native

    1.3 小结

    2 React Native环境搭建与调试

    2.1 React Native环境搭建

    2.1.1 Mac环境下搭建React Native
    安装Node.Js
    安装npm
    安装Yarn
    安装Homebrew
    安装Watchman
    React Native版本升级
    2.1.2 React Native开发IDE
    安装Atom
    2.1.3 创建React Native项目
    2.1.4 运行React Native项目
    2.1.5 iOS环境
    2.1.6 Android环境
    2.1.7 Windows环境下搭建React Native

    2.2 React Native 项目结构剖析

    2.2.1 React Native文件结构
    2.2.2 iOS文件结构及代码分析
    2.2.3 Android文件结构及代码分析

    2.3 React Native开发IDE介绍

    2.3.1 Atom+Nuclide
    安装Nuclide
    使用Nuclide运行项目
    2.3.2 WebStorm

    2.4 React Native调试技巧

    2.4.1 JavaScript调试技巧
    console.log日志
    JavaScript调试器
    断点调试技巧
    2.4.2 React Native调试
    iOS调试
    Android调试
    调试面板介绍
    Element Inspector命令

    2.5 React Native代码测试

    2.5.1 使用Flow进行类型检查
    Flow安装与配置
    2.5.2 Jest单元测试
    Jest安装与配置
    单元测试(Android)
    2.5.3 集成测试
    集成测试(Android)
    集成测试(iOS)
    快照测试(iOS)

    2.6 小结

    3 React Native开发基础

    3.1 FlexBox布局

    3.1.1 FlexBox简介
    3.1.2 FlexBox布局模型
    3.1.3 FlexBox布局属性
    display-flex
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content
    3.1.4 FlexBox伸缩项目属性
    order
    flex
    align-self
    3.1.5 FlexBox在React Native中的应用
    flex
    flexDirection
    alignSelf
    alignItems
    flexWrap
    justifyContent
    3.1.6 FlexBox综合实例

    3.2 ES6语法基础

    3.2.1 组件的导入与导出
    组件导出
    组件导入
    3.2.2 类
    创建类
    组件类方法
    组件的属性与属性类型
    3.2.3 状态变量
    3.2.4 回调函数
    3.2.5 参数
    参数默认值
    不定参数
    拓展参数
    3.2.6 箭头操作符
    3.2.7 Symbol
    Symbol属性名遍历
    Symbol.for()和Symbol.keyFor()
    3.2.8 解构
    对象解构
    数组解构

    3.3 React JSX

    3.3.1 JSX入门
    3.3.2 JSX语法
    载入方式

    3.4 样式

    3.4.1 申明与操作样式
    语法
    3.4.2 样式分类
    行内样式
    内嵌样式
    外部样式
    3.4.3 样式使用
    StyleSheet.create
    3.4.4 样式传递

    3.5 手势与触摸事件

    3.5.1 触摸事件
    TouchableHighlight使用实例
    TouchableHightLight
    TouchableNativeFeedback(仅限于Android)
    TouchableOpacity
    TouchableWithoutFeedback
    3.5.2 手势系统响应
    PanResponder
    3.5.3 辅助功能
    辅助功能属性
    accessibilityLabel(Android、iOS)
    accessibilityTraits (iOS)
    onAccessibilityTap (iOS)
    onMagicTap (iOS)
    accessibilityComponentType (Android)
    accessibilityLiveRegion (Android)
    importantForAccessibility (Android)

    3.6 小结

    4 常用组件介绍

    4.1 HTML元素与原生组件

    4.1.1 文本组件
    4.1.2 图片组件
    加载本地图片
    加载网络图片
    resizeMode
    4.1.3 TextInput组件
    TextInput简单使用
    TextInput属性和方法
    TextInput示例
    4.1.4 ScrollView组件
    ScrollView属性
    ScrollView方法
    ScrollView示例

    4.2 结构化组件

    4.2.1 View组件
    View简单使用
    View组件使用
    4.2.2 ListView组件
    ListView常用属性
    ListView案例:商品列表
    商品列表标题
    商品列表
    完整示例代码
    4.2.3 Navigator组件
    第三方库
    4.2.4 WebView组件
    WebView属性及方法
    WebView实例

    4.3 平台特定组件

    4.3.1 TabBarIOS和TabBarIOS.Item组件
    TabBarIOS属性及方法
    TabBarIOS.Item属性及方法
    使用案例
    4.3.2 ToolbarAndroid组件
    ToolbarAndroid属性及方法
    ToolbarAndroid示例
    4.3.3 SegmentedControlIOS组件
    SegmentedControlIOS属性及方法
    SegmentedControlIOS示例
    4.3.4 ViewPagerAndroid组件
    ViewPagerAndroid属性及方法
    ViewPagerAndroid示例

    4.4 Touchable系列组件

    4.4.1 TouchableWithoutFeedback
    TouchableWithoutFeedback属性及方法
    4.4.2 TouchableHighlight
    TouchableHighlight属性
    TouchableHighlight示例
    4.4.3 TouchableOpacity
    TouchableOpacity属性
    TouchableOpacity示例
    4.4.4 TouchableNativeFeedback
    TouchableNativeFeedback属性和方法
    TouchableNativeFeedback示例

    4.5 小结

    5 常用API介绍

    5.1 AppRegistry

    APPRegistry属性和方法
    AppRegistry实例

    5.2 StyleSheet

    代码层面
    性能层面
    StyleSheet属性
    StyleSheet方法
    StyleSheet渲染组件原理
    StyleSheet示例

    5.3 AppState

    AppState属性和方法
    AppState基本用法

    5.4 AsyncStorage

    AsyncStorage方法
    AsyncStorage示例

    5.5 PixelRatio

    pixelratio方法
    pixelratio示例

    5.6 Animated

    Animated属性
    Animated方法
    AnimatedValue
    AnimatedValueXY
    Animated使用
    Animated示例
    Animated.timing()
    Animated.spring()
    Animated. parallel()

    5.7 Geolocation

    Geolocation方法
    Geolocation示例

    5.8 NetInfo

    属性和方法
    5.8.1 获取网络状态
    Android获取网络状态
    iOS获取网络状态
    5.8.2 网络状态监听
    5.8.3 判断网络是否连接

    5.9 小结

    6 组件封装

    6.1 组件的生命周期

    挂载(初始化)
    更新(运行)
    移除(销毁)

    6.2 第三方库

    6.2.1 react-navigation
    react-navigation简介
    StackNavigator示例
    react-navigation其他属性
    StackNavigator参数属性
    6.2.2 react-native-tab-navigator
    react-native-tab-navigator属性及方法
    react-native-tab-navigator示例
    6.2.3 react-native-scrollable-tab-view
    react-native-scrollable-tab-view属性及方法
    react-native-scrollable-tab-view示例
    6.2.4 react-native-image-picker
    react-native-image-picker示例
    Android环境配置
    iOS环境配置
    上传服务器
    6.2.5 Mobx
    状态(State)
    派生(Derivations)
    Action
    Mobx基本概念
    Mobx API
    Mobx与Redux对比
    6.2.6 react-native-art
    基础组件
    属性
    Surface
    Shape
    Text
    Path
    绘制直线/虚线
    绘制矩形
    绘制文本

    6.3 自定义组件

    6.3.1 组件的导出导入
    6.3.2 TabbarView封装
    6.3.3 九宫格布局封装
    6.3.4 下拉刷新组件封装
    RefreshControl属性
    RefreshControl方法
    RefreshListView封装
    RefreshListView示例

    6.4 小结

    7 网络与通信

    7.1 通信机制

    7.1.1 React Native与Android通信
    Java层
    C++层
    JS层
    C++与JS通信
    Module Registry
    Native与JS通信
    Native调用JS
    JS调用Native
    7.1.2 React Native与iOS通信
    属性传递
    原生模块调用JS
    JS调用原生模块

    7.2 Promise 机制

    7.2.1 Promise 简介
    Promise对象
    Promise状态
    then
    catch
    7.2.2 Promises基本用法
    7.2.3 在React Native中使用AJAX技术
    综合示例

    7.3 网络请求

    7.3.1 XMLHttpRequest请求
    构造函数
    方法
    属性
    XMLHttpRequest实例
    7.3.2 fetch请求
    fetch语法
    fetch请求
    WebSocket
    fetch网络请求示例

    7.4 小结

    8 混合开发高级篇

    8.1 React Native调用iOS原生组件

    8.1.1 React Native链接原生库
    8.1.2 React Native调用Objective-C创建的原生组件

    8.2 React Native调用Android原生组件

    8.2.1 编写原生UI组件
    VideoViewPackage.java
    8.2.2 编写JavaScript端实现
    VideoPlayView.js

    8.3 小结

    9 热更新与打包部署

    9.1 iOS应用打包

    9.1.1 iOS应用配置
    添加应用配置
    配置应用图标和启动图像
    配置网络白名单
    9.1.2 打包离线Bundle
    9.1.3 设置发布Scheme
    9.1.4 发布应用

    9.2 Android应用打包

    9.2.1 打包离线Bundle
    9.2.2 生成签名密钥
    9.2.3 生成签名APK
    命令方式打包
    Android Studio打包
    配置应用图标和启动图像

    9.3 热更新

    9.3.1 热更新原理
    9.3.2 热更新配置
    安装命令
    手动关联
    配置Bundle URL
    iOS的ATS例外配置
    9.3.3 登录与创建应用
    9.3.4 添加热更新功能
    获取appKey
    检查与下载更新
    切换版本
    首次启动、回滚
    9.3.5 发布热更新版本
    发布iOS应用
    发布Android应用
    发布新的热更新版本

    9.4 小结

    10 基于LBS的天气预报应用开发

    10.1 需求分析与确定

    10.1.1 需求分析
    10.1.2 需求确定
    10.1.3 整体功能分析
    10.1.4 技术与架构分析
    移动接入技术
    移动访问技术
    移动终端定位技术
    天气数据来源

    10.2 项目设计

    10.3 程序入口与工具模块

    10.3.1 程序入口
    10.3.2 数据模型定义与数据解析
    10.3.3 数据存储
    初始化
    数据的保存、读取和删除操作
    10.3.4 工具类

    10.4 模块开发

    10.4.1 组件封装
    10.4.2 天气预报页面开发
    10.4.3 Navigation导航

    10.5 运行结果

    11 O2O移动团购应用

    11.1 需求分析

    11.1.1 需求分析
    11.1.2 功能分析

    11.2 应用设计

    11.2.1 模块划分
    11.2.2 添加第三方库

    11.3 项目搭建与工具模块开发

    11.3.1 程序入口
    11.3.2 搭建主框架
    11.3.3 导航栏封装
    11.3.4 WebView封装
    11.3.5 字体样式工具类

    11.4 功能开发

    11.4.1 分类导航入口开发
    思路分析
    11.4.2 专题活动开发
    11.4.3 商品列表开发
    11.4.4 详情页面开发
    11.4.5 Modal分享弹窗开发

    11.5 完成开发

    11.5.1 添加闪屏页
    11.5.2 修改应用图标和名称
    Android篇
    iOS篇

    11.6 小结

    思维导图

    React Native移动开发实战

    防止博客图床图片失效,防止图片源站外链:

    http://www.processon.com/chart_image/5e5b345be4b069f82a1a5a48.png)

    思维导图在线编辑链接:

    https://www.processon.com/view/5e5b345be4b069f82a1a5a45

  • 相关阅读:
    Spring 中出现Element : property Bean definitions can have zero or more properties. Property elements correspond to JavaBean setter methods exposed by the bean classes. Spring supports primitives, refer
    java定时器schedule和scheduleAtFixedRate区别
    hql语句中的select字句和from 字句
    使用maven搭建hibernate的pom文件配置
    Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from http://repo.maven.apache.org/ maven2 was cached in the local repository, resolution will not be reattempted until the update interv
    对于文件File类型中的目录分隔符
    hibernate的事务管理和session对象的详解
    解决mac 中的myeclipse控制台中文乱码问题
    ibatis selectKey用法问题
    Java中getResourceAsStream的用法
  • 原文地址:https://www.cnblogs.com/jingle1267/p/12862847.html
Copyright © 2011-2022 走看看