react native

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解应用打包和发布到应用市场。 iOS打包 发布到AppStore 安卓打包 发布到GooglePlay和国内安卓市场 iOS打包 在Xcode 8里就可以完成打包和上传安装包到AppStore，但在打包之前需要到Apple开发者网站配置好证书、应用信息和Provision文件等。 打开 Apple Developer 网站，选择“Account”，然后选择“Certificates, Identifiers & Profiles”，就能看到如下界面。 在这里需要完成以下几项任务： 在Certificates下创建Distribution证书 在Identifiers下新建一个App ID 在Provisioning Profiles下为Distribution创建配置文件 以上配置完成后，打开Xcode 8，确保设备一栏选择的是“Generic iOS Device”，然后选择Product > Archive打包。打包完成后的界面显示如下，这个时候的包还没有签名。选择右边的“

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解首页如何开发。首页相对来说比较复杂，用到了RN的 ScrollView 和 ListView 组件。学完首页后，其它页面类似，因此关于功能开发方面的讲解到此结束。 RN的ListView在ScrollView的基础上做了很多性能优化，以保证在列表项非常复杂和列表很长的时候仍然能够保证页面滚动的流畅性。当然与此相伴，在使用上也会更复杂。 在页面里引入ListView组件。 在componentWillMount里创建ListView的DataSource，注意必需指定rowHasChanged来帮助ListView判断列表项是否需要重新渲染。 在componentWillReceiveProps里更新DataSource，否则即便数据发生了变化，列表也不会更新。 下拉刷新的时候，在列表上方显示Loading图标。 在列表滚动到结尾时，加载更多数据。 首页组件挂载后，获取列表数据，刷新导航。因为导航里的城市和运动信息可动态修改，所以需要刷新导航来动态生成，而不是由Layout来生成固定的。为了保证流畅度，所有操作都在导航动画完成之后进行。

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解用户注册和登录。由于篇幅所限，后面关于功能的讲解中我们重点关注component部分的代码，container、action和reducer代码请查阅Github上的公开库 zqc-app-demo。 注册登录选择页 注册 登录 注册登录选择页 启动时如果检测到没有登录，则进入此页让用户选择注册新帐号还是使用现有帐号登录。退出登录后也应进入此页。 注册 为了避免让用户反感注册过程中填写资料，应尽量减少必填信息，并且分步骤让用户填写，而不是在一个页面中填写完所有，从视觉上让用户觉得轻松一些。对于移动应用来说，最好使用手机号注册，方便日后联系用户。如果使用手机号注册，需要验证手机号的真实性。 有关表单数据校验、网络请求和缓存方面的技术资料可阅读前一篇文章 React Native跨平台移动应用开发实战 - 数据同步。 第一步，填写手机号和密码 表单数据将实时校验，填写错误时将在导航下方给予用户提示。 第二步，验证手机号 为了防止用户频繁请求发送验证码，需要增加最短时间间隔限制，服务端也需要作限制。 第三步，完善资料

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解应用和服务端之间如何同步数据。一方面应用里用户输入的数据需要提交到服务端，另一方面应用也需要从服务端获取其他用户提交的数据。涉及的工作包括表单数据验证，请求服务端API，缓存服务端响应数据等。这些是纯技术层面的工作，不涉及具体业务逻辑，但却是后面业务逻辑开发工作开展的前提。 表单数据验证 请求API 缓存数据 表单数据验证 以登录页面为例，表单数据验证效果如下。在用户输入的同时，会实时验证输入数据。如果验证失败，将在导航栏下方给予提示。这种验证方式比提交数据后由服务端来验证并反馈给用户在体验方面更好。当然处于安全考虑，服务端数据验证仍然需要。 在用户输入过程中，监听变化，如果数据发生变化则调用saveInput来保存新数据。保存数据的同时会调用validateInput来验证数据，验证结果保存在store的error.input属性下。 如果验证结果不为空，表示输入有误，Layout里的输入错误组件会显示出来。 请求API RN的 Networking 支持 Fetch API来执行网络请求。相比于XHR，fetch更强大和灵活。为了让应用里的网络请求更简单和统一，以及在请求前后添加一些全局操作，

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解应用的启动，启动需要完成检测网络、获取位置、加载持久化数据、检查登录状态等工作。 入口 Store创建与持久化 引导页 入口 入口文件负责store的创建和加载路由，然后就进入路由里定义的初始页，也就是引导页Bootstrap。可以看到iOS和安卓的入口文件内容一样，都是调用setup来完成。setup里创建store，并加载路由，然后应用就进入到引导页。 Store创建与持久化 Redux的store支持通过插件来扩展其功能。 我们使用 Logger for Redux 来打印每个action及其作用前后的状态，方便出现问题时分析到底是哪个action引起。 另外还使用了 Redux Persist 来持久化store到存储，以便应用重启后能恢复到上次退出时的状态，提升应用进入速度，还可以借此支持离线模式。注意，一些临时性的状态不要持久化，比如错误提示、进度提示、网络状态等，以免引起错乱。可以通过添加相关数据项到插件的“blacklist”里来避免持久化。

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解应用整体层面的一些东西，包括布局、导航，以及错误、进度、Loading等信息显示。 布局 导航 进度提示 Loading 错误提示 布局 先来看一下完整的布局是怎样的一个效果。如下图所示，最顶部是状态栏和导航，下方紧接着的是进度条（有后台任务处理时出现，比如图片压缩），然后是内容区，页面中间是Loading图标（表明有网络请求正在进行），偏下方的位置是错误信息（出错时才有），最底部是Tab栏。 一个好的布局既要灵活满足不同页面的需求，比如有的页面没有导航条，有的没有Tab栏，还能尽量让页面不关心这些全局的界面元素。一个应用里的页面尽量使用同一个布局，这样能避免许多重复性的工作，也便于日后调整和修改。 下面是在球场的布局文件，完整的请点击底部链接查看。从中可以看到进度条、错误提示、Loading图标都是在需要的时候才会出现，导航和Tab栏也都可以控制是否显示。 导航 RN的 Navigator 做得比较底层，

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，介绍RN应用开发用到的各项技术。读者在进行RN应用开发前，需要掌握这些技术。RN应用开发里面，RN只负责UI的绘制和跟原生系统的通信，对于一个完整的应用来说，还有许多技术层面的东西需要考虑，包括导航、应用状态管理和持久化、数据缓存、网络请求、错误处理等。 JavaScript Flexbox Layout React Redux 项目结构 JavaScript RN使用的JS引擎（下文提到引擎时如无特别说明即为该引擎）为Safari浏览器使用的引擎，当在Chrome浏览器里远程调试时，既然是运行在浏览器里，那就当然是V8引擎了。这两个引擎支持的JS语言特性非常相似，但也不排除会遇到两者行为不一致的地方，开发过程中应当避免使用这些特定于平台的特性。完整的说明详见官方文档，JavaScript Runtime。 RN支持的JS特性范围横跨ES5、ES6和ES7，具体特性列表可参考官方文档。引擎并不直接支持这些特性，RN使用 [Babel](Babel JavaScript compiler) 来进行语法转换，

本文隶属于文章系列 React Native跨平台移动应用开发实战 ，讲解RN开发和调试环境的搭建。开发和调试环境的易用性对后续的工作效率影响很大，值得花时间来准备。由于笔者是Mac电脑，因此下文如无特别说明，都是在Mac OS X环境下的操作。 安装开发工具 在设备上运行 Dev域名配置 Debugging 安装开发工具 RN开发工具包括： node 运行打包服务Packager及各种JS工具 watchman 检测文件修改 react-native-cli RN命令行工具，功能包括启动Packager、在模拟器或设备上运行应用、链接原生组件库、打印应用日志、打包发布包等 Xcode iOS应用开发IDE Android Studio 安卓应用开发IDE 详细的安装步骤在官网有详细说明，Getting Started，这里不再赘述。安装好开发工具后执行下面的命令来初始化项目并在模拟器里试运行： > react-native init zaiqiuchang > cd

React Native介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 RN运行时包含一个原生主线程和一个JS线程，JS线程执行JS代码，负责界面布局和业务逻辑处理，原生线程负责界面渲染和原生功能执行。RN尽量使用原生组件（现有原生组件经过封装后可在JS里调用），以避免重复造轮子。这样有很多好处，一是可以利用现有的大量的原生组件；二是可以达到跟原生组件一样的性能；三是通过JS封装过后的组件可以支持跨平台。 JS在RN里面的作用类似于Python这样的支持调用原生C库的脚本语言，都是起着“胶水”的作用。复杂计算和系统功能通过调用原生接口来完成，流程控制和业务逻辑则在“胶水”语言里完成。这样既提高了开发效率，又兼顾了性能。 起源 本文章系列是 Go + Docker API服务开发和部署 的姊妹篇，都是笔者在开发 在球场 这款体育社交类应用过程中的技术总结。