React Native高手进阶
文章平均质量分 94
如果你是一名React Native爱好者,或者有一颗热爱钻研新技术的心,欢迎关注React Native高手进阶。
CrazyCodeBoy
将来的我们会感谢现在努力奋斗的自己!
展开
-
React Native Hooks开发指南
目录什么是HooksHooks的特性如何在React Native使用Hooks在React Native中使用 State Hook在React Native中使用 Effect HookHooks与class的选择更多资料什么是HooksHooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 是一种在函数式组件中使用有状态函数的方法。Hooks不支持在class中使用,比原创 2021-12-19 14:03:34 · 684 阅读 · 0 评论 -
移动端跨平台技术演进之路
移动端高速发展的这些年,伴随着企业对研发效率、动态能力的诉求不断增加,跨平台技术也如雨后春笋层出不穷。那么,在这篇文章中将向大家分享移动端跨平台技术演进之路。首先我们看为什么需要跨平台技术?为什么需要跨平台技术?一方面伴随着移动互联网的高速发展,公司间竞争越来越激烈,如何将业务快速落地、快速试错,成为备受关注的问题。另一方面,提升研发效率、缩短研发周期,保障产品快速试错并能快速迭代新功能,让新产品新功能以更快的速度同触达 Android、iOS 等多端用户是当今企业的一致的诉求。众所周知,An原创 2020-10-24 00:18:29 · 930 阅读 · 0 评论 -
『React Navigation 3x系列教程』createBottomTabNavigator开发指南
期待已久的新教程上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!createBottomTabNavigator相当于iOS里面的TabBarController,屏幕下方的标签栏。如图:createBottomTabNavigator APIcreateBottomTabNavigator(RouteConfigs,...原创 2018-12-30 19:40:37 · 2164 阅读 · 0 评论 -
React Navigation 3x系列教程』之createStackNavigator开发指南
createStackNavigatorcreateStackNavigator提供APP屏幕之间切换的能力,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。屏幕转场风格默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同的,这也是React Native重平台性的一个体现,在Android上从屏幕底部淡入,在iO...原创 2018-12-24 23:14:11 · 2720 阅读 · 1 评论 -
从navigator到react-navigation实战教程
随着react-navigation逐渐稳定,Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件,Navigator 自然胜任不了,这时React Native社区便孕育出了一个开源导航组件react-navigation。react-navigation的出现替代了Navigator、 Ex-Navigation等老一代的导航组件,re...原创 2018-05-15 22:40:46 · 1311 阅读 · 0 评论 -
React Native0.50+开发指导(中文更新说明)
本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助:- 在兼容性方面新增了对Android8.0、iPhone X的支持;- 在API方面为TimePicker添加了打开方式的API,另外允许在构建Android项目的时候指定applicationId;- 在组件方面,新添加了支持侧滑显示菜单的SwipeableFlatLis原创 2017-12-14 23:29:56 · 2449 阅读 · 0 评论 -
React Native年度报告(2017-2018)
概述在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大,在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件,也有与时俱进的用于适配全屏幕的SafeAreaView组件,同时呢,一些性能较差、无法适应React Native未来发展的一些老的组件,如:...原创 2018-02-26 23:16:45 · 1395 阅读 · 0 评论 -
React Native Android混合开发实用教程
在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。混合开发的一些其他应用场景: 在原有项目中加入RN页面,在RN项目中加入原生页面 原生页面中嵌入RN模块 RN页面中嵌入原生模块以上...原创 2018-08-28 23:01:18 · 2139 阅读 · 0 评论 -
React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说,分享与第三方登录不仅能加强用户粘性,增加流量及新用户,也能提升用户存、留优化产品质量等。原创 2017-09-30 00:53:06 · 6170 阅读 · 12 评论 -
React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)
在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说,分享与第三方登录不仅能加强用户粘性,增加流量及新用户,也能提升用户存、留优化产品质量等。各大平台都有对应的开发平台来提供分享与第三方登录的服务,比如微信开发平台/腾讯开发平台、新浪开发者平台等。原创 2017-09-10 22:40:43 · 7184 阅读 · 2 评论 -
【React Native系列教程】Mac(OSX)平台搭建React Native开发环境
在Mac平台上开发React Native需要安装以下环境和工具:Note.jsReact Native Command Line ToolsXCode/AndroidStudio原创 2017-05-20 14:06:58 · 4385 阅读 · 0 评论 -
教你轻松在React Native中集成统计的功能
在这篇文章中我会向大家分享,在React Native中集成umeng统计的方法及流程。因为umeng官网有非常详细的集成文档集成文档,在这里我会介绍在React Native的Android和iOS中如何集成统计功能,但不会长篇大论。原创 2017-09-03 23:10:59 · 4972 阅读 · 1 评论 -
【React Native系列教程】构建React Native官方Examples
手把手教你构建运行React Native官方Examples。原创 2017-06-01 21:23:02 · 1044 阅读 · 0 评论 -
快速创建React Native App
本文向大家分享如何快速构建React Native App以及在使用快速构建方案中可能存在的一些问题及解决方案。原创 2017-07-13 01:51:54 · 6155 阅读 · 1 评论 -
教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)
当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:原创 2017-08-19 00:19:22 · 14836 阅读 · 2 评论 -
React Native发布APP之打包iOS应用
本文出自《React Native学习笔记》系列文章。 了解更多,可以关注我的GitHub和加入: React Native学习交流群 用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。原创 2017-02-09 18:05:45 · 15176 阅读 · 2 评论 -
【React Native系列教程】Windows平台搭建React Native开发环境
在Windows平台上开发React Native需要安装以下环境和工具:1. Note.js2. React Native Command Line Tools3. Android Studio原创 2017-05-17 22:51:57 · 2029 阅读 · 0 评论 -
React Native升级指南|v0.40+升级适配经验与心得
React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本发布。随着一次次版本的迭代,React Native也逐渐稳定,版本发布频率保持在了每一到两周一次。新版本不停的迭代对于React Native开发者来说,及时升级React Native版本让项目能够使用更多的API、新特性以及淘汰掉一些老的API,不仅成为原创 2017-01-17 19:20:41 · 6722 阅读 · 1 评论 -
React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块
一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布。原创 2017-01-23 09:50:07 · 4489 阅读 · 0 评论 -
React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块
一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布。原创 2017-01-23 09:57:19 · 2527 阅读 · 2 评论 -
【React Native实战教程】GitHub Trending API数据的获取
项目开源地址:GitHub Popular,GitHubTrending关于GitHub Trending API的困惑GitHub Popular中有个treding模块,该模块是GitHub的treding的手机版,在这个模块中你可以使用只有在PC上才能使用的功能。为了开发这个treding模块我们需要获取GitHub的treding的API数据。不过不幸的的是GitHub并没有开放有关tre原创 2016-10-26 20:10:22 · 2506 阅读 · 0 评论 -
React Native按钮详解|Touchable系列组件使用详解
在做App开发过程中离不了的需要用户交互,说到交互,我们首先会想到的就是按钮了,在React Native中没有专门的按钮组件。 为了能让视图能够响应用的的点击事件,我们需要借助Touchablexxx组件,来包裹我们的视图。为什么说是Touchablexxx呢,因为它不只是一个组件,而是一组组件,一下四个组件都可以用来包裹视图来响应用户的点击事件。原创 2017-01-10 17:16:25 · 12567 阅读 · 0 评论 -
一个上架了的React Native项目实战总结
项目源码下载:GitHub Popular喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫treding,但这个功能只能在网页上查看, 而且在手机上浏览显示效果很不友好,而我想在地铁上,餐厅,路上等空余的时间使用它,所以我需要一款带有这个功能的App。原创 2016-10-24 09:23:28 · 3354 阅读 · 0 评论 -
React Native 添加启动屏教程,React Native启动白屏解决方案
问题描述:用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)。问题分析:为什么会产生白屏?React Native应用在启动时会将js bundle读取到内存中,并完成渲染。这期间由于js bundle还没有完成装载并渲染,所以界面显示的是白屏。原创 2016-09-30 18:02:56 · 13561 阅读 · 4 评论 -
每个开发者都应该拥有一款的 GitHub Trending 客户端,GitHub 最受欢迎的开源项目浏览器
GitHub Popular这是一个用来查看GitHub最受欢迎与最热项目的App,它基于React Native支持Android和iOS双平台。English目录功能与特性下载安装预览图运行调试ToDo功能与特性支持订阅 50 多种编程语言;支持添加/删除编程语言,并支持自定义它们的排序;支持收藏喜欢的项目;支持多种颜色主题自由切换;支持搜索,并自持自定义订阅关键字;支持原创 2016-10-19 12:50:14 · 6445 阅读 · 1 评论 -
React Native原生模块与JS模块通信的几种方式
React Native原生模块向JS传递数据的几种方式(Android)在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式。方式一:通过Callbacks的方式说起Callbacks大家都不陌生,它是最常用的设计模式之一。原创 2016-09-29 18:52:01 · 5923 阅读 · 1 评论 -
React Native 和iOS Simulator 那点事
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快捷键原创 2016-09-22 22:14:02 · 6706 阅读 · 0 评论 -
React Native Android的启动白屏/闪屏的原因,解决方案,原理,使用方法
React Native Android启动屏,启动白屏,闪现白屏本文出自《React Native学习笔记》@http://www.cboy.me/系列文章。问题描述:用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)。原创 2016-09-15 13:32:39 · 7838 阅读 · 0 评论 -
一款简单易用的 Toast 组件,支持 Android&iOS
react-native-easy-toast一款简单易用的 Toast 组件,支持 Android&iOS。原创 2016-09-13 11:18:13 · 2413 阅读 · 0 评论 -
React Native 性能优化之可取消的异步操作
React Native 性能优化之可取消的异步操作本文出自《React Native 研究与实践》系列文章。概述在项目开发中离不了的需要进行一些异步操作,这些异步操作在改善用户体验的同时也带来了一些性能隐患。原创 2016-09-08 13:16:31 · 6596 阅读 · 1 评论 -
React Native 学习资料,教程,项目实践,视频
React Native Awesome(汇聚知识,分享精华)React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。原创 2016-09-03 11:54:04 · 4027 阅读 · 2 评论 -
React Native 每日一学(Learn a little every day)
本文出自《React Native学习笔记》系列文章。 每天一个知识点(技巧,经验,填坑日记等),每天学一点,离大神近一点。汇聚知识,分享精华。原创 2016-08-25 19:08:46 · 2597 阅读 · 1 评论 -
AsyncStorage存储key管理小技巧
AsyncStorage存储key管理小技巧 本文出自《React Native 每日一学(Learn a little every day)》栏目。场景AsyncStorage是React Native推荐的数据存储方式。当我们需要根据条件从本地查询出多条记录时,你会想到来一个select * from xx where xx。但是很不幸的告诉你,AsyncStorage 是不支持sql的,原创 2016-09-01 22:26:18 · 5077 阅读 · 0 评论 -
React Native之React速学教程(下)
本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。原创 2016-08-17 18:44:07 · 6978 阅读 · 0 评论 -
React Native之React速学教程(中)
本篇为《React Native之React速学教程》的第二篇。本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解,让大家对组件(Component)有个更系统以及更深入的认识。原创 2016-08-13 20:55:59 · 4207 阅读 · 0 评论 -
React Native之React速学教程(上)
React Native之React速学教程(上)本文出自《React Native学习笔记》系列文章。React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。原创 2016-08-11 19:49:25 · 7162 阅读 · 1 评论 -
React Native布局详细指南
本文出自《React Native学习笔记》系列文章。一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。 FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working原创 2016-08-01 23:36:56 · 14820 阅读 · 3 评论 -
React Native应用部署/热更新-CodePush最新集成总结(新)
React Native的出现为移动开发领域带来了两大革命性的创新: 1. 整合了移动端APP的开发,不仅缩短了APP的开发时间,也提高了APP的开发效率。 2. 为移动APP动态更新提供了基础。 本文将向大家分享React Natvie应用部署/动态更新方面的内容。原创 2016-07-23 13:29:22 · 18210 阅读 · 2 评论 -
React Native 研究与实践
React Native 学习笔记该项目用于分享我在研究React Native过程中的一些经验,总结,以及踩过的一些坑。如果文章中有不对的地方还请大家及时批评指正,本项目持续更新,欢迎大家Fork and Star。 欢迎大家加入:React Native学习交流群 165774887原创 2016-07-23 13:09:30 · 1486 阅读 · 0 评论 -
React Native发布APP之签名打包APK
用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。 众所周知,Android要求所有的APP都需要进行数字签名后,才能够被安装到相应的设备上。签名打包一个Android APP已经是每一位Android开发者的家常便饭了。原创 2016-07-19 19:44:34 · 14516 阅读 · 5 评论