如果你的项目稍有规模，那么你一定经受过一种折磨。一个很久之前的API返回了巨多务必的数据，是可以完全服务现在的需求。但是明显不必要的数据数据过多会造成后端的性能问题。在前端占了带宽。后期的维护对于前后端都是可能产生棘手的问题。之所以FB要提出GraphQL的标准也是因为FB本身支持的产品太多遇到了这样的问题。

React hooks出来之后又打开了一道前端造轮子的大门。各种Hooks的工具满天飞。react-redux也跟上了这波潮流。项目代码在这里useSelector，useDispatch首先，也是最重要的一点。如果你不知道要不要用redux，那么最好不要用。redux主要解决的问题是统一来源的状态管理。全局state存放在store里。store.getState()可以获得st...

如果你使用react native开发了app，会不会想有一个站点呢。如果你想，那么react-native-web就有用武之地了。只要不是平台相关的组件基本都可以复用，包括js样式。更不用说内置的accessibility。

记录一下后面要写的：Redux hooksGesture responder systemNew navigationWebBrief instroduction of desktop devGraphQL & ApolloPermission

iOS啥都不用干，只要这样： {代码...} 然后再实现一个RCTTurboModule的protocol。可以参考iOS的CoreModules里面的实现。参考官方repo。[链接] {代码...}

FB宣传了N多年的新架构估计很多人都熟知了。最主要的改进就是从所有通讯都通过异步Bridge的方式转为直接通讯的方式。减少消息通讯延迟，提高性能。这其中最关键的就是TurboModule。

使用原生试图，在RN里是必不可少的一部分。如果有人在原生功能都做好了，直接拿来用或者微调一下试图部分就可以用也就不需要再另外造一个，一套轮子了。

很多时候我们需要从原生发送事件给JS。比如在官方文档提到的一个日历📅事件。你定好了一个会议，或者一个活动，之后再指定的日期发生。或者关闭了贡献单车，蓝牙收到关锁成功的信号。又或者地理围栏这样的APP，在你进入/离开一个地理围栏的时候，都需要从原生发送事件给JS。

I think the best way to do this is to create a new RN project that has the same name as your existing project.

最近的开发中要用到很多的各式各样的组件。但是发现ant design mobile（后面简称ANTDM）里很多的资源。于是就分析一下，学习学习。

在React Native里有很多种方法来创建可滚动的list。比如，ScrollView和ListView。他们都各有优缺点。但是在React Native 0.43里增加了两种行的list view。一个是FlatList, 一个是SectionList。今天我们就来详细了解一下FlatList。

Navigator已经被React Native废弃了。也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到。不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的，值不值得用。

使用Toast作为例子。实现的功能是可以在JavaScript里写ToastAndroid.show('Awesome', ToastAndroid.SHORT)来显示一个Toast通知。

store => next => action =>看起来很复杂有木有。基本上你是在写一个一层一层往外返回的方法，调用的时候是这样的：

在开发React Native的App的时候，你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的，有的是第三方试图组件，总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制，你可以非常简单的用来包装已有的原生视图。

本文假设你已经有一定的React Native基础，并且想要了解React Native的JS和原生代码之间是如何交互的。 React Native的工作线程 shadow queue：布局在这个线程工作 main thread：UIKit在这里工作 Javascript thread：Js代码在这里工作 另外每一个原生模块都有自己的一个工作GCD queue，除非你明确指定它的工作队列 {代码...

本文作者写作的时间较早，所以里面会出现很多的旧版ES5的时代的方法。不过，虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法，让读者更加容易理解涉及到的概念。以下是正文。

Stateless component也叫无状态组件。有三种方法可以创建无状态组件。 坑 一般一个组件是怎么定义的： 很久以前的方法： {代码...} 后来有了ES6 {代码...} 接ES6的光，看起来好了很多。 填坑 但是，一个组件不需要状态的时候还给出那么多的定义还是不够精炼，太麻烦。于是用stateless component来填这个坑。 {代码...} ...

终于开始新一篇的填坑之旅了。RN厉害的一个地方就是RN可以和Native组件通信。这个Native组件包括native的库和自定义视图，我们今天主要涉及的内容是native库方面的知识。自定义视图的使用会在后面讲到。

这次我们来填React Native生命周期的坑。这一点非常重要，需要有一个清晰的认识。如果你了解Android或者iOS的话，你会非常熟悉我们今天要说的的内容。

React Native自己实现的ListView还有一个隐藏功能那就是Section。Section在文档里连一句话都没有给足，但确确实实的是内置的。使用Section可以给数据分组，并且每一个Section都有一个Header。Section Header可以像iOS的TableView的Section Header一样在滑动的时候保持当前的Section Header浮动在Table View的最上部。

如同黑夜里的一道光一样，就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP，iOS、Android都有。之前都是用Native开发的，但是2016的这一次是用React Native开发的。

回头看看RN的填坑之旅系列，发现一路写下来都是我在开发中遇到的问题如何解决的。兴之所至，不问顺序。于是出现一个问题，填坑系列和学习知识的顺序不是很一致。比如今天要说的布局问题。其实在一个app开发之前，就应该有所了解。否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢？上来就是一个疑问。

最近着手开发的一个兼容iOS、Android的TabBar。还在不断开发中！ 地址：[链接] 欢迎fork，欢迎star。 :p 自己捣鼓了个E文的readme，没啥难度凑合可看。 react-native-tabs React Native platform-independent tabs. Originally forked form [链接] Why I need to use it? I'm developing an app which needs to run on b...

React Native的导航有两种，一种是iOS和Android通用的叫做Navigator，一种是支持iOS的叫做NavigatorIOS。我们这里只讨论通用的Navigator。会了Navigator，NavigatorIOS也就不是什么难事了。

使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然，知其所以然”这句老话从远古喊到现代了。 以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下，毕竟深入研究RN的时间不多，如果有什么理解的不对的地方还请各位读者指正。 用React官网的Thinking in React作为例子。 这几个组件的结构...

Flow是一个静态的检查类型检查工具，设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误。在js开发的过程中，总会遇到一些问题。小的还可以，比如用alert或者console等输出一些信息可以debug，并解决。但是如果项目比较大的时候，这些手法只能起到一定的辅助作用。更有甚者，有些问题不运行到那段代码，...

比较精细的动画可以用Animated来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。

列表显示数据，基本什么应用都是必须。笔者写作的时候RN版本是0.34。今天就来从浅到深的看看React Native的ListView怎么使用。

如果不能从头到尾的建立一个RN应用，那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现，Android和iOS各回各家，各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。