返回
概况
分类

React-澳门新浦京手机版:Native入门指南,我是一名iOS开发者

日期: 2020-03-27 00:12 浏览次数 : 124

摘要即时通讯IM云服务商环信发布了React Native Demo,用于指导开发者用React Native开发基于环信IM。Demo 介绍即时通讯IM云服务商环信今日发布了React Native Demo,用于指导开发者用React Native开发基于环信IM。React Native 可以让开发者使用 Javascript 和 React 开发原生 iOS 和 Android 应用,提高开发效率(Learn once, write anywhere)。此次React Native Demo 已集成环信 Web IM SDK,并提供即时通讯基本功能,开发者可以直接将该 Demo 集成到您的应用中,立即获得即时通讯的能力。Demo 源码下载GitHub 下载地址: 版本支持:React Native Demo 支持 iOS 9.0 以上版本,以及 Android 4.1 (API 16)。注:所有开发调试环境均基于Mac。Demo 功能列表功能 React Native Demo 分为 iOS Demo 和 Android Demo 两部分,已完成的功能详见: 目录结构App 的目录结构如下: • Containers: 容器 | 页面 | 路由 ◦ App.js 总入口 ◾ Redux/ 初始化 ◾ I18n/ 初始化 ◾ Config/index.js 系统初始配置 ◦ RootContainer.js 根容器 ◾ Navigation/NavigationRouter.js 初始化路由 ◾ /Config/ReduxPersist 持久化初始化• Components 常用组件• I18n 多语言支持• Images 图片资源• Lib WebIM初始化• Navigation: 路由相关• Redux: actions / reducers• Sdk: webim-easemobo SDKRedux State:{ // ui相关 ui: [ // ui通用:比如loading common: { fetching:false }, login: { username: '', password: '', isSigned: false, }, register: { }, contactInfo: { }, ], im: , // 数据实体 entities: { roster: { byName: { { jid, name, subscription, groups? } }, names: ['lwz2'...], // 好友列表在此,因为好友列表来源于roster,息息相关 friends: , }, // 订阅通知 subscribe: { byFrom: {} }, room: {}, group: { byId: {}, names: }, members: { byName: , byGroupId: } blacklist: {}, message: { byId: {} chat: { [chatId]: [messageId1, messageId2] }, groupChat: { [chatId]: {} }, } }}

React Native

快速入门

  • 快速入门实例 - react native 中文网

由于会有一些开源项目和开源组件使用ES5标准进行开发,所以应该看得懂ES5代码。
React/React Native 的ES5 ES6写法对照表 - react native 中文网

教程

1. View组件

在React Native里有一个类似于div的组件,就是View组件,支持多层嵌套,支持flexbox布局。

JSON.parse()和JSON.stringify()

我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了。网络上知识资源非常的多,但能让人豁然开朗、迅速学习的还是少数,我整理出的这些文章对于初学者来说是比较有好的,希望通过整理我的学习路线,能给同样作为iOS开发者,想学习React Native的朋友们一些帮助。
既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解释说明。

工具

  • react-native-snippets(代码提示)

  • react-native-babel(使用ES6+)

  • sqlite for react-native

  • gulp-react-native-css(就像写css一样写React Style)

  • rnpm(React Native Package Manager)

  • Pepperoni - React Native项目初始化套件

  • Deco IDE - React Native IDE

  • ignite - React Native CLI项目生成器

React Native中没有DOM的概念,只有组件的概念,所以在ReactJS中使用的HTML标签以及DOM的操作是不起作用的,但是组件的生命周期、JSX的语法、事件绑定以及自定义属性等,在React Native和ReactJS中是一样的。

Rudex学习资料

语法规范

JavaScript本身变化很快,这份由Airbnb维护的语法规范是使用较为广泛、全面的,很有参考性。

  • Airbnb React/JSX Style Guide

React-Native学习指南

本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!

同时还有Awesome React Native系列

3. Navigator组件

  1. 概述:
    1. 在RN中专门负责视图切换的组件;
    2. Navigator(Android和iOS)和NavigatorIOS(iOS)
  2. 对比:
    1. 两者都可以用来管理应用中“场景”的导航(屏幕)。导航器建立了一个路由栈,用来弹出、推入或者替换路由状态,他们和H5的history API很类似。
    2. 区别在于NavigatorIOS使用了iOS中的UINavigationController类,而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOS,而NavigatorIOS只能用于iOS。
    3. NavigatorIOS是轻量、受限的API,故相对于Navigator来说不太方便定制。由开源社区主导开发,RN的官方团队并不在自己的应用中使用。建议使用Navigator,避免在开发过程中遇到问题。
  3. 使用:
    1. 导航器通过路由对象分辨不同的场景,利用renderScene方法,导航栏可以根据指定的路由来渲染场景。
    2. 可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或手势**

redux-thunk基本教程

原理

  • React Native 通信机制详解 - bang’s blog

React Native探索系列教程

  • React Native探索(一):背景、规划和风险

  • React Native探索(二):布局篇

  • React Native探索(三):与 react-web 的融合

2. Text组件

  1. 概述:
    1. 作用:主要用于显示文本;
    2. 特性:具有响应性,可以嵌套,可以继承样式(内部Text组件可以继承外部Text组件样式)
  2. 主要特性:

    1. onPress
    2. numberOfLines

      最多显示多少行

      1. onLayout

精益 React 学习指南

热更新

  • CodePush 热更新流程(iOS) - talisk’s Wiki
  • React Native热更新部署/热更新-CodePush最新集成总结 - 简书

系列教程

  • 深入浅出React(一):React的设计哲学 - 简单之美

  • 深入浅出React(二):React开发神器Webpack

  • 深入浅出React(三):理解JSX和组件

  • 深入浅出React(四):虚拟DOM Diff算法解析

  • 深入浅出React(五):使用Flux搭建React应用程序架构

  • react-webpack-cookbook中文版

  • Flex 布局语法教程

  • React 初探

  • React虚拟DOM浅析

  • react组件间通信

  • React 数据流管理架构之 Redux 介绍

  • React服务器端渲染实践小结

  • React Native Android 踩坑之旅

  • React Native 之 JSBridge

《看漫画,学 Redux》 —— A cartoon intro to Redux

评价

  • 跨平台:目前React Native官方已经支持iOS、Android两个平台的移动设备,民间也有一些大牛在做macOS、tvOS,甚至UWP平台的适配。但由于不同平台特性不同,并不能一份代码在所有平台上直接运行,React Native的思想是「Learn once, write anywhere」,我们需要针对不同平台的特性写出不同的代码,尽量保持组件的高可复用性。
  • 性能:官方宣称性能堪比Native,实际使用中我们会发现几个问题,比如复杂视图渲染出View层级过多、ListView(等同于iOS上的UITableView)无重用机制、有些组件存在内存泄露。这就会导致在部分低端Android机型上的性能过差,复杂的、大型的应用会有明显性能问题。
  • 热更新:由于App Store应用商店发版迭代效率问题,热更新成为了iOS平台非常渴求的功能,可喜的是React Native的热更新能力非常好,通过将JavaScript代码部署到服务器中,运行过程中即可重新reload整个界面。
  • 学习成本:对于iOS开发者来讲,要了解相当数量的Web前端开发知识才可以进行开发,对于Web前端开发者来讲,对于原生性能调优则需要原生开发知识和经验,所以说学习成本略高。
  • 开发效率:Android和iOS平台可复用很多组件,仅部分代码需要各自平台分别维护,所以比开发两个平台原生应用效率要高得多。加上本身可动态渲染的能力,不用重新编译,Command⌘+R即可重新渲染界面,开发效率更是惊人地快。

ES6

  • 深入浅出ES6(一):ES6是什么

  • 深入浅出ES6(二):迭代器和for-of循环

  • 深入浅出ES6(三):生成器 Generators

  • 深入浅出ES6(四):模板字符串

  • 深入浅出ES6(五):不定参数和默认参数

React 入门实例教程
React-Native入门指南
Flex 布局教程:语法篇
React Native探索(二):布局篇
JSON.parse 函数 (JavaScript).aspx)

实现原理

我们都知道在iOS平台上,苹果提供了一个JavaScriptCore的framework,可以进行JavaScript语言的解析,React Native通过多次封装定义,最终实现了在JavaScript语言中调用Objective-C的类和方法。具体的原理我们现在还不必深究,后文的学习路线中会有提到。
所以既然是调用Objective-C的类和方法,性能上当然是不差的(但也不完美),所以这也是React Native相比其他跨平台开发方式的一大优势。

组件

由于已经有较好的组件库网站,这里就不做总结。可以直接查看如下网站,过后可能精选一部分优质组件出来 :P

  • React-native组件库(比较全的组件库)

  • React Native Modules

  • 最佳轮播类组件

  • react-native-simple-router

  • react-native-router-flux

  • 下拉刷新组件

  • 模态框

  • react-native-navbar

  • 滚动轮播组件

  • HTML显示组件

  • Material React Native (MRN) - Material Design组件库

  • react-native-gitfeed - GitHub客户端(iOS/Android)

探索react native首屏渲染最佳实践