导航应该是流畅而直观的，使用户体验愉快。在React Native世界中，开发者可以选择使用几种导航库，其中两个重要的选择是React Navigation和React Native Navigation。我们将更详细地了解它们如何处理堆栈导航（Stack Navigation）和标签导航（Tab Navigation），这对于应用程序用户体验至关重要。
做过安卓原生开发的童鞋们应该都做过侧边栏这个东西，而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。 那么今天也在这里给大家介绍一下React-Native中的侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。
移动应用程序由多个屏幕组成。在构建移动应用程序时，首要考虑的是如何处理用户在应用程序中的导航问题，例如屏幕的展示和屏幕之间的切换。
React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等，只求精不求全。 如果你是一名React Native爱好者，或者有一颗热爱钻研新技术的心，喜欢分享技术干货、项目经验、以及你在React Naive学习研究或实践中的一些经验心得等等，欢迎投稿《React Native Awesome》。 如果你是一名Android、iOS、或前端开发人员，有者一颗积极进取的心，欢迎关注《React Native Awesome》。本项目汇
在2017年1月，新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果，可能会成为未来RN导航组件中的主力军。该库包含三类组件： （1）StackNavigator：用
这篇文章将向大家分享createDrawerNavigator的一些开发指南和实用技巧。
众所周知，在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator组件来实现页面的跳转，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中。 如果开发者需要继续使用Navigator，则需要先使用yarn add react-native-deprecated-custom-components命令安装后再使用。不过，官方并不建议开发者这么做，而是建议开发者直接使用导航库react-navigation。react-navigation是React Native社区非常著名的页面导航库，可以用来实现各种页面的跳转操作。 目前，react-navigation支持三种类型的导航器，分别是StackNavigator、TabNavigator和DrawerNavigator。具体区别如下：
npm install @react-navigation/drawer 官方文档 import React from 'react'; import { View, Text, Button } from 'react-native'; import { DrawerContentScrollView, createDrawerNavigator } from '@react-navigation/drawer'; const Drawer = createDrawerNavigator
在上一节Navigation组件，我们使用系统提供的导航组件做了一个跳转的例子，不过其实战能力不强，这里推荐一个超牛逼的第三方库：react-navigation。在讲react-navigation之前，我们先看一下常用的导航组件。 导航控件 常见的导航主要分为三种： 1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏 2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏 3.DrawerNavi
跨端开发框架是现代应用程序开发的一项重要技术，它使开发者能够使用一套代码基础构建应用程序，并在多个平台上运行，包括Web、移动和桌面。本文将深入探讨跨端开发框架的关键概念，为您提供一份全面的指南，并提供带有实际代码示例的技巧，以帮助您构建强大的跨平台应用。
看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件，所以这个组件的功能当然也是一样的。 DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的，并且它的直接子视图是放置内容的主视图。我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。 D
调用系统打电话、发短信、发邮件、打开网址功能 https://github.com/anarchicknight/react-native-communications 快速检索列表（按首字母） https://github.com/johanneslumpe/react-native-selectablesectionlistview 图表组件 https://github.com/tomauty/react-native-chart 动画组件 https://github.com/oblador/rea
这个文件目录除了src 其他的都是通过react-native init my_app自动生成的。
react-navigation是FaceBook推荐使用的一个库，用于导航效果，官方文档
前言 React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。 那么我们今天说说在React Native项目开发中常见的一些第三方库。 常见的第三方库 组件篇 CheckBox（多选按钮） react-nati
和h5用a标签来跳转不太一样的是，rn必须依赖导航器跳转。导航器也可以看成是一个普通的React组件，你可以通过导航器来定义你的APP中的导航结构。导航还可以渲染通用元素，例如可以配置的标题栏和选项卡栏。
前言 本系列是基于React Native版本号0.44.3写的。我们都知道，一个App不可能只有一个不变的界面，而是通过多个界面间的跳转来呈现不同的内容。那么这篇文章将介绍RN中的导航。 导航 什么是导航？ 其本质就是视图之间的界面跳转，例如首页跳转到详情页。 在RN中有两个组件负责实现这样的效果，它们是: NavigatorIOS React Navigation 你可能在很多地方听说过Navigator，这个老组件会逐渐被React Navigation代替。笔者在最后也会讲解一下Navigator
随着React Navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件React Navigation。
React Navigation是RN开发中一个比较常见的导航器，主要提供三种基本的导航样式。
本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余.
随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。 react-navigation的出现替代了Navigator、 Ex-Navigation等老一代的导航组件，react-navigation可以说是Navigator的加强版，不仅有Navigator的全部功能，另外还支持底部
网上看到了好多篇 react/vue 组件设计方法/原则 ，内容都是雷同（指不该相同而相同）。 我深恶痛绝，并深刻检讨自己，意识到普及互联网知识已经迫在眉睫，绝不容许有人浑水摸鱼。在短暂的失落和悲怆过后，这肩负振兴祖国互联网知识的重任，舍我其谁？ 我集百家之长于一身，取其精华去其糟粕，将最精辟的原理和最完善的案例总结在了这里，供大家免费参阅。如有疑问请在下方留言或私信本人，我将第一时间为你解答。
重写一个应用是一件简单的事，可是演进一个应用则是一件复杂的工作。 过去的一年多里，我在工作上的主要职责是：手机 APP 开发。日常主要是编写基于 Ionic 和 Angular 的混合应用，并想方设法地帮助客户将之与 React Native 相结合。在完成了嵌入 WebView 后，重写插件等一系列工作后，便想记录一下这个过程中遇到的坑。 平滑地演进 如我在开头所说，在有足够人力和物力的情况下，最好的方式就是在重写应用。 一来，应用在其生命周期里，经过了不同的开发人员、不同的业务变更，必然有大量的遗留代码
在react中，virtual dom 就像一个中间层，介于开发者描述的视图与实际在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面，开发者必须操作浏览器的Dom，这个操作代价昂贵，过度操作dom会给性能带来影响。React 维护了一个内存版本的 DOM，通过计算得出必要的最小操作并重新渲染。如下图：
原文：https://github.com/xiaoxiaosaohuo/Note/issues/60
注：本文以采访形式展现 📷 问题 1：您好！很荣幸有机会有机会采访您，请简单地做个自我介绍吧。 很荣幸接受你们 ITPUB 的采访，我先自我介绍一下。我叫蒋宏伟，是《React Native 新架构实战课》专栏的作者。 我是 2015 年开始转行开始做前端工程师的；在 2018 年的时候担任了 58RN 项目的负责人，负责58集团内部 React Native 技术基础设施建设；在 2020 年，从单兵作战变成了小组长。 带团队和单兵作战很不一样，单从技术层面讲，最关键的是定技术方向，你要对得起大家，别把大
2015年3月26日，Facebook公司对外正式发布了React Native——使用React框架跨平台开发原生移动应用的开源技术框架。开发者可以使用React Native高效地开发运行于Android与iOS操作系统的应用程序。它的设计理念是：使用ReactNative开发，既拥有Native的良好人机交互体验，又保留了React框架的开发效率。
转载请注明出处。请前往 Tiga on Tech 查看原文以及更多有趣的技术文章。
为用户启用屏幕截图功能已经成为移动应用中用户体验的重要部分。这项功能使用户能够保存或分享应用界面的当前状态，以记住一个难忘的时刻，与朋友分享成就，或向开发者报告问题。
React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率，又同时拥有 Native 应用的良好体验，加上 Virtual DOM 跨平台的优势，实现了真正意义上的：Learn Once,Write Anywhere.
移动应用分 iOS 和 Android 两个平台以前要分别进行开发，通常很是费时费力。React Native 是 Facebook 在 F8 大会开源的 JavaScript 框架（2015 年 9 月 15 日发布），可以让广大开发者使用 JavaScript 和 React 开发跨平台的移动应用。在短短不到一年的时间里，它成为手机端必不可少的开发模式之一。本文作者介绍了 Coinbase 如何从原生开发迁移到 React Native，以及绿地法和棕地法的优劣之处。绿地法就是从零开始使用一个全新的系统，而不掺杂任何过去的东西，就像一片绿地，从未受到过任何以往开发的影响。而棕地法，是从现有系统开始的，只是一些重要的部分有所更改。
React-Native已经存在了约2年，而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Windows的桌面应用程序量身打造了一些框架，这简直太酷了。
本文目录： 一、React Native 已经成为了移动前端技术的趋势 二、基于React Native 进行移动平台研发过程中的一些思考 三、基于React Native 进行移动平台研发过程中的一些实践 四、小结 一、React Native 已经成为了 移动前端技术的趋势 从2014年年底，Facebook计划开源React Native 的时候，我就已经开始关注TA了，关注的主要原因是，我们在2012年的时候，将我们的移动平台前端开发技术确定为“DSL->Javascript->Native Mob
结合React Native和小程序容器技术，开发者可以通过热重载和快速迭代提高开发效率，并实现统一的代码和逻辑，简化维护和升级过程。这种技术应用价值使得开发者能够更灵活地构建跨平台应用程序，并充分利用多个生态系统的优势。
随着移动应用的需求越来越大，许多企业开始将焦点转移到移动应用的开发上。通过引入新技术、新平台和新框架，移动应用开发者能够创建划时代的移动应用。
可以先浏览一下中文翻译的开发文档具体了解一下关于React Native，想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html。 在官方文档中，只给出在Window上安装React Native的教程，没有给Mac下的教程,我在网上找了半天，找了部分内容，又根据自己的理解整理了一下 1、安装Java 这里需要注意对环境变量的设置，可以根据java -version来检测一下 2、安装SDK 这里需要注意设置环
摘要 ReactNative给前端提供了一套两端共用代码和快速实现热更新的框架，但在实际落地中，需要进行大量的保障工作和优化工作来让业务能够平稳上线，另一方面，部分页面有着三端实现的需求，需要一套方案
很高兴在今天下午与各位有这样一次关于驱动原生（React Native） 技术的交流。 此次交流的内容，主要是我在Pworld2016 大会的讲解内容，本想比较真实的还原当时的情况，在各个设计群发出预
作者简介 郑勇，携程高级技术经理，目前主要负责CRNWEB框架的开发工作，以及在携程内部的使用推广和性能优化。 前言 React-Native自从2015年推出，就一直火到了现在，一度在技术圈言必RN，激发一波广泛的思潮。携程基础业务研发团队迅速跟进，在React-Native基础之上，开发出了CRN这一适合携程业务高速发展的、抹平了iOS和Android端组件开发差异的、做了大量性能提升的框架。然而无论是CRN还是React-Native本身都无法解决移动板块中的一大版图——WEB平台。 而现实是：存在
在PhoneGap、RubyMotion、Xamarin、Ionic一众跨平台开发工具中，React Native能够杀出一条血路，获得目前这么大的影响力，除了React社区生态圈的加持和Facebook的大力推广以外，另外一个最主要的原因就是其在开发效率和应用性能方面取得了一个比较好的平衡： 开发效率通过JS工程实践，逻辑跨平台复用得到极大提升 性能则通过全Native的UI层得到满足 不过，虽说框架提供了这个平衡能力，平衡点的选择却掌握在开发者手中，本文将从React Native的性能角度来看看应该
Airbnb 表示，尽管很多团队都依赖 React Native 并计划在可预见的将来使用它，但他们最终还是无法实现最初的目标。此外，还有一些他们无法克服的技术和组织挑战，如果继续使用 React Native，这些挑战最终会变成更大的难题。
Jamon Holmgren 是一家软件开发公司的创始人兼 CTO，拥有超过 25 年的编程经验，同时也是 React Native 的核心成员，维护着几个开源库。在这篇文章里，他试着尽可能公平地从多方面去讨论 Flutter 和 React Native 的优劣势。本文仅代表他个人观点，希望能为读者带来收获。
在得到一些信息后，可以看出，要用RN高效率的做出比较不错的App是有可能的，单看投入度与最初设计是否合理，而且现在关于React Native的各种文档是相当丰富的，所以这个阶段想切入RN可能是一个不错的选择。
上一篇（React Native 架构一览）从设计、线程模型等方面介绍了 React Native 的现有架构，本篇将分析这种架构的局限性，以及 React Native 正在进行的架构升级计划
编者：本文来自携程框架研发部高级经理魏晓军在内部活动中分享，介绍了其在撰写国内第一本React Native相关书籍《ReactNative入门与实战》时的经历和感想，从中我们或许可以一窥技术人该如何打造个人品牌。以下为分享的主要内容实录。
React Native作为一个有上千开发者参与的开源项目，自从2015年3月27日第一版发布以来到现在已经有147次版本发布了，平均起来几乎每周都会有新的版本发布。随着一次次版本的迭代，React Native也逐渐稳定，版本发布频率保持在了每一到两周一次。新版本不停的迭代对于React Native开发者来说，及时升级React Native版本让项目能够使用更多的API、新特性以及淘汰掉一些老的API，不仅成为了一门必修课也是一个不小的挑战。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
