fengyuzhengfan的专栏

目录什么是HooksHooks的特性如何在React Native使用Hooks在React Native中使用 State Hook在React Native中使用 Effect HookHooks与class的选择更多资料什么是HooksHooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 是一种在函数式组件中使用有状态函数的方法。Hooks不支持在class中使用，比

移动端高速发展的这些年，伴随着企业对研发效率、动态能力的诉求不断增加，跨平台技术也如雨后春笋层出不穷。那么，在这篇文章中将向大家分享移动端跨平台技术演进之路。首先我们看为什么需要跨平台技术？为什么需要跨平台技术？一方面伴随着移动互联网的高速发展，公司间竞争越来越激烈，如何将业务快速落地、快速试错，成为备受关注的问题。另一方面，提升研发效率、缩短研发周期，保障产品快速试错并能快速迭代新功能，让新产品新功能以更快的速度同触达 Android、iOS 等多端用户是当今企业的一致的诉求。众所周知，An

期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!!createBottomTabNavigator相当于iOS里面的TabBarController，屏幕下方的标签栏。如图：createBottomTabNavigator APIcreateBottomTabNavigator(RouteConfigs,...

createStackNavigatorcreateStackNavigator提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。屏幕转场风格默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Android上从屏幕底部淡入，在iO...

在React Native的应用场景中，有时候一个APP只有部分页面是由React Native实现的，比如：我们常用的携程App，它的首页下的很多模块都是由React Native实现的，这种开发模式被称为混合开发。混合开发的一些其他应用场景： 在原有项目中加入RN页面，在RN项目中加入原生页面 原生页面中嵌入RN模块 RN页面中嵌入原生模块以上...

随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。react-navigation的出现替代了Navigator、 Ex-Navigation等老一代的导航组件，re...

概述在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大，在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时呢，一些性能较差、无法适应React Native未来发展的一些老的组件，如：...

本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导，希望能对从事React Native开发的你有所帮助：- 在兼容性方面新增了对Android8.0、iPhone X的支持；- 在API方面为TimePicker添加了打开方式的API，另外允许在构建Android项目的时候指定applicationId;- 在组件方面，新添加了支持侧滑显示菜单的SwipeableFlatLis

在我们常用的App中经常会看到分享与第三方登录的功能，可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说，分享与第三方登录不仅能加强用户粘性，增加流量及新用户，也能提升用户存、留优化产品质量等。

在我们常用的App中经常会看到分享与第三方登录的功能，可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说，分享与第三方登录不仅能加强用户粘性，增加流量及新用户，也能提升用户存、留优化产品质量等。各大平台都有对应的开发平台来提供分享与第三方登录的服务，比如微信开发平台/腾讯开发平台、新浪开发者平台等。

在这篇文章中我会向大家分享，在React Native中集成umeng统计的方法及流程。因为umeng官网有非常详细的集成文档集成文档，在这里我会介绍在React Native的Android和iOS中如何集成统计功能，但不会长篇大论。

当我们运行一个React Native项目的时候，React Native会启动一个默认端口号为8081的本地服务，该8081的服务就是React Native项目的一个本地服务器，用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的，一切都是那么简便，但如果出现如下几种情况，那么你需要认真阅读本文了：

本文向大家分享如何快速构建React Native App以及在使用快速构建方案中可能存在的一些问题及解决方案。

手把手教你构建运行React Native官方Examples。

在Mac平台上开发React Native需要安装以下环境和工具：Note.jsReact Native Command Line ToolsXCode/AndroidStudio

在Windows平台上开发React Native需要安装以下环境和工具：1. Note.js2. React Native Command Line Tools3. Android Studio

本文出自《React Native学习笔记》系列文章。 了解更多，可以关注我的GitHub和加入： React Native学习交流群 用React Native开发好APP之后，如何将APP发布以供用户使用呢？一款APP的发布流程无外乎：签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。

一直想写一下我在React Native原生模块封装方面的一些经验和心得，来分享给大家，但实在抽不开身，今天看了一下日历发现马上就春节了，所以就赶在春节之前将这篇博文写好并发布。

一直想写一下我在React Native原生模块封装方面的一些经验和心得，来分享给大家，但实在抽不开身，今天看了一下日历发现马上就春节了，所以就赶在春节之前将这篇博文写好并发布。

React Native作为一个有上千开发者参与的开源项目，自从2015年3月27日第一版发布以来到现在已经有147次版本发布了，平均起来几乎每周都会有新的版本发布。随着一次次版本的迭代，React Native也逐渐稳定，版本发布频率保持在了每一到两周一次。新版本不停的迭代对于React Native开发者来说，及时升级React Native版本让项目能够使用更多的API、新特性以及淘汰掉一些老的API，不仅成为

在做App开发过程中离不了的需要用户交互，说到交互，我们首先会想到的就是按钮了，在React Native中没有专门的按钮组件。 为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，一下四个组件都可以用来包裹视图来响应用户的点击事件。

项目开源地址：GitHub Popular，GitHubTrending关于GitHub Trending API的困惑GitHub Popular中有个treding模块，该模块是GitHub的treding的手机版，在这个模块中你可以使用只有在PC上才能使用的功能。为了开发这个treding模块我们需要获取GitHub的treding的API数据。不过不幸的的是GitHub并没有开放有关tre

项目源码下载：GitHub Popular喜欢逛GitHub的小伙伴都知道，它有个查看最热项目的功能叫treding，但这个功能只能在网页上查看， 而且在手机上浏览显示效果很不友好，而我想在地铁上，餐厅，路上等空余的时间使用它，所以我需要一款带有这个功能的App。

GitHub Popular这是一个用来查看GitHub最受欢迎与最热项目的App,它基于React Native支持Android和iOS双平台。English目录功能与特性下载安装预览图运行调试ToDo功能与特性支持订阅 50 多种编程语言;支持添加/删除编程语言，并支持自定义它们的排序;支持收藏喜欢的项目;支持多种颜色主题自由切换;支持搜索,并自持自定义订阅关键字;支持

问题描述：用React Native架构的无论是Android APP还是iOS APP，在启动时都出现白屏现象，时间大概1~3s（根据手机或模拟器的性能不同而不同）。问题分析：为什么会产生白屏？React Native应用在启动时会将js bundle读取到内存中，并完成渲染。这期间由于js bundle还没有完成装载并渲染，所以界面显示的是白屏。

React Native原生模块向JS传递数据的几种方式(Android)在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递，这篇文章将向大家分享原生模块向JS传递数据的几种方式。方式一：通过Callbacks的方式说起Callbacks大家都不陌生，它是最常用的设计模式之一。

React Native 和iOS Simulator 那点事本文出自《React Native学习笔记》@http://www.cboy.me系列文章。问题1：使用React Native时按cmd+r无法reload js，cmd+d无法唤起 React Native开发菜单？不知大家是否有过这样的经历，用 React Native开发应用正不亦乐乎的时候，突然发现，cmd+r，cmd+d快捷键

React Native Android启动屏，启动白屏，闪现白屏本文出自《React Native学习笔记》@http://www.cboy.me/系列文章。问题描述：用React Native架构的无论是Android APP还是iOS APP，在启动时都出现白屏现象，时间大概1~3s（根据手机或模拟器的性能不同而不同）。

react-native-easy-toast一款简单易用的 Toast 组件，支持 Android&iOS。

React Native 性能优化之可取消的异步操作本文出自《React Native 研究与实践》系列文章。概述在项目开发中离不了的需要进行一些异步操作，这些异步操作在改善用户体验的同时也带来了一些性能隐患。

React Native Awesome(汇聚知识，分享精华)React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等，只求精不求全。

AsyncStorage存储key管理小技巧 本文出自《React Native 每日一学(Learn a little every day)》栏目。场景AsyncStorage是React Native推荐的数据存储方式。当我们需要根据条件从本地查询出多条记录时，你会想到来一个select * from xx where xx。但是很不幸的告诉你，AsyncStorage 是不支持sql的，

本文出自《React Native学习笔记》系列文章。 每天一个知识点（技巧，经验，填坑日记等），每天学一点，离大神近一点。汇聚知识，分享精华。

本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6，学习在开发中常用的一些ES6的新特性，以及ES6与ES5的区别，解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。

本篇为《React Native之React速学教程》的第二篇。本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解，让大家对组件(Component)有个更系统以及更深入的认识。

React Native之React速学教程(上)本文出自《React Native学习笔记》系列文章。React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。

本文出自《React Native学习笔记》系列文章。一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。 FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working

React Native的出现为移动开发领域带来了两大革命性的创新： 1. 整合了移动端APP的开发，不仅缩短了APP的开发时间，也提高了APP的开发效率。 2. 为移动APP动态更新提供了基础。 本文将向大家分享React Natvie应用部署/动态更新方面的内容。

React Native 学习笔记该项目用于分享我在研究React Native过程中的一些经验，总结，以及踩过的一些坑。如果文章中有不对的地方还请大家及时批评指正，本项目持续更新，欢迎大家Fork and Star。 欢迎大家加入：React Native学习交流群 165774887