今天我们来讲解一下关于 ViewPager 的使用，它是一个允许子视图左右滚动翻页的容器。而且每一个 ViewPagerAndroid 的子容器会被视作一个单独的页，并且会被拉伸填满整个 ViewPagerAndroid。 特别注意：ViewPagerAndroid 中所有的子视图必须是，必须是，必须是纯 View 组件，不能是复合的容器和组件。我们可以给每个子视图设置样式，比如：padding 或者 backgroundColor 。 来，我们看一看 ViewPagerAndroid 有哪些属性或者方法呢
前言 React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。 那么我们今天说说在React Native项目开发中常见的一些第三方库。 常见的第三方库 组件篇 CheckBox（多选按钮） react-nati
调用系统打电话、发短信、发邮件、打开网址功能 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
前言：他方山上有佳石，可以用来琢玉器。只有解决了一个红屏，才有机会遇见另一个红屏。只有解决了一个困难，才有机会遇到其他的困难。O(∩_∩)O~生命不息，奋斗不止。 React Native中有许多第三方用于封装tabBar的库，当然也有官方提供的。React-native-scrollable-tab-view是一款非常实用的第三方库。放于界面之上可以实现一个界面中子界面的切换效果，置于界面之下可实现功能模块间的切换，通常用于封装自定义的tabBar。 安装 在终端输入命令 npm i react-na
（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） 编者按：其实我并不太喜欢在周末发公众号，毕竟大家都在休息和放松，不想学习，但是今天在群里我看到有人说：这周群主关于React Native的文章发的很少，不够学的，我发的少， 是因为我看阅读量少，所以减少了发布次数，但是看到群里的人这么一问，感觉我必须今天再多发一篇。回馈给一直跟着我学习的程序员和开发者。 大家好，我是ScrollView，相信做过移动或者前端开发的人肯定都很熟悉我，对，我就是
友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） 看完了这个组件的名字 KeyboardAvoidingView ，你们心里肯定会想这是个什么东西，Keyboard 大家肯定知道是键盘，那是关于键盘的什么呢？Avoiding 是避免，回避的意思，这会大家估计知道什么了吧？键盘避免视图组件，我们在开发的时候，经常会遇到手机上弹出的键盘常常会挡住当前的视图，所以这个 KeyboardAvoidingView 组件的功能就是解决这个常见问题的，它可以
概述 今天我们来讲解一下关于 ViewPager 的使用，它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件，作用是实现滚动翻页的，在RN中也是有这么一个组件的（ViewPagerAndroid），每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。 我们来看一段官方给出的例子： render: function() { return ( <ViewPagerAndroid
概述 ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误。 Scroll
简要介绍今天的分享大纲，罗马不是一天建成的，小程序也不是一天发明的；小程序这种介于H5和Native App之间的特殊应用形态，从探索到成熟，经历了哪些过程，我们首先带大家回顾梳理一下，然后从现有技术架构出发，分析小程序当下几个主要性能坑点，各家小程序引擎为解决这些坑点，做了哪些完善工作；比如大家知道小程序是以web渲染为主、原生渲染为辅，那引入原生渲染后，引发了哪些新的问题？为解决这些，微信提出了同层渲染的方案，同层渲染在技术层面上又是如何实现的？最后从当前已知问题出发，对于小程序未来的技术更迭，抛出一些我们认为的可能方向，供大家参考。
animating bool型 显示指示器(true，默认的)还是隐藏它(false)；
低头一族的我们，每天花大把大把的时间拉啊拉啊。当屏幕的内容超过一屏时，我们很熟练的往上拉一点就可以看到剩下的内容了，这时候右边还会滚动条告诉我们这是可以往上拉的。
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。
本篇博客将介绍如何开发一款简易的ReactNative小应用汇率换算器。本应用仅作为学习使用，其支持在人民币与美元间进行汇率计算。汇率计算器应用主要分为两部分：键盘与显示屏。键盘提供给与用户进行输入，在显示屏上进行汇率换算结果的显示。复杂的界面无非是简单组件的组合使用，因此，在进行开发之前，我们可以思考可能需要使用到的独立组件的开发，例如键盘按钮的开发，有键盘按钮组成的键盘的开发，显示屏开发等。首先创建一个初始的ReactNative工程，将index.ios.js与index.android.js文件中的内容全部删掉。在项目根目录中新建4个目录，分别为const、controller、image和view。这4个目录用于存放后面我们需要新建的静态文件，控制器文件，图片素材和视图文件。
前言 本系列是基于React Native版本号0.44.3写的。我们都知道，一个App不可能只有一个不变的界面，而是通过多个界面间的跳转来呈现不同的内容。那么这篇文章将介绍RN中的导航。 导航 什么是导航？ 其本质就是视图之间的界面跳转，例如首页跳转到详情页。 在RN中有两个组件负责实现这样的效果，它们是: NavigatorIOS React Navigation 你可能在很多地方听说过Navigator，这个老组件会逐渐被React Navigation代替。笔者在最后也会讲解一下Navigator
做过安卓原生开发的童鞋们应该都做过侧边栏这个东西，而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。 那么今天也在这里给大家介绍一下React-Native中的侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。
一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。
现代移动应用程序在入门过程中经常涉及一个步骤，你需要输入发送到你的电子邮件或手机号码的验证码 PIN。有时，你需要使用类似于分割 OTP 输入字段的东西来输入 PIN。另一种输入验证码 PIN 的方式是使用拨号盘。
学习 React Native for Android 的开发环境搭建。 Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。注意这里的 核心 两个词，它指的是那些底层的、与界面无关的逻辑。与 ionic / PhoneGap 这类 Web App 开发框架不同，React Na
本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。 FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不
出品 | OSC开源社区（ID：oschina2013) VS Code 1.75 已发布，此版本主要带来如下优化： 配置文件 - 创建和共享配置文件，以配置扩展、设置、快捷方式等。 VS Marketplace 签名 - 已发布的扩展现在默认进行代码签名。 辅助功能改进 - 终端屏幕阅读器模式、新的键盘快捷键。 更轻松地调整多视图大小 - 拖动布局角以一次调整多个视图的大小。 树视图搜索历史 - 在树视图中快速运行搜索历时。 更好的终端链接检测 - 检测包含空格、括号、行和列格式的链接。 新的 Git 命
概述 FlexBox（弹性框布局）：英文全称the flexible box Module，FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。 注：FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Las
概述 FlexBox（弹性框布局）：英文全称the flexible box Module，FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。 注：FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿
概述 在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大，在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时呢，一些性能较差、无法适应React Native未来发展的一些老的组件，如：ListView、Navigator等组件也逐渐退出了沙场。 本文将向大家总结React Native在过去的一年
在React Native开发中，官方为我们提供的Tab控制器有两种：TabBarIOS和ViewPagerAndroid。TabBarIOS，仅适用于IOS平台 ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）。在项目开发中，我们优先选择一些开源兼容性比较好的第三方库，例如，react-navigation，以及本文即将说到的react-native-scrollable-tab-view(官方地址)。react-native-scrolla
| 导语 Pluto 是 iOS 上的一个排版渲染引擎，通过 JSON/JS 文件可以很方便地描述界面元素，开发效率很高，并且在流畅度，内存等方便有保证 Qzone Feed 业务复杂，样式很多。每次新增一种 Feed 样式，开发工作量很大，需要跟版本。样式之间耦合严重，每改一种样式，另一种样式可能会受影响。 基于这样的背景下，Feed Team 急需一个比较成熟的渲染引擎，他至少需要解决以下问题： 提升开发效率。 样式之间独立，不互相耦合。 新增和修改 Feed 样式不需要跟版本。 无论采取什么方案，
看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件，所以这个组件的功能当然也是一样的。 DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的，并且它的直接子视图是放置内容的主视图。我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。 D
原文链接：http://wetest.qq.com/lab/view/369.html
作 者 Wison，腾讯移动客户端开发 高级工程师 商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。 WeTest 导读 Pluto 是 iOS 上的一个排版渲染引擎，通过 JSON/JS 文件可以很方便地描述界面元素，开发效率很高，并且在流畅度，内存等方便有保证。pluto.oa.com 上有更多详细资料。 Qzone Feed 业务复杂，样式很多。每次新增一种 Feed 样式，开发工作量很大，需要跟版本。样式之间耦合严重，每改一种样式，另一种样式可能会受影响。 基于这样的背景下，Fe
也许你收藏了千篇万篇VS Code快捷键，很可惜却没能记住他们，是因为你没有实际操作过，英文不好没关系，你真正需要的是让你双手指尖的肌肉增加一些记忆。
在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。
@property(nonatomic)CGPoint contentOffset;
从2016年开始关注React Native到现在，React Native的每一个版本发布我都会关注一下，虽然最近将重心转移到区块链开发上，这一年里，我还出版了一本《React Native移动开发实战》的书。在过去的一年中React Native经历了十几次的版本迭代，版本也从从v0.40升级到v0.52，总体来说，版本迭代没以前那么频繁，组件也越来越丰富，稳定性也越来越好了，下面就一些新组件，新API进行相关的总结。
至于 FlatList SectionList 自带的上拉加载功能，根本就是骗人的。
一张跟内容完全关系的图 介绍 一个带有TabBar和可切换页面的控件。 在Android中可以看成是ViewPager和TabLayout的结合。 实际效果的话，就下面这样了。 官方的动图 你可以选择直接上官方Github了解怎么使用，或者继续往下看我装逼。 添加到项目中 npm install react-native-scrollable-tab-view --save 使用 基本用法 用tabLabel指定Tab名称 render() { return ( <S
海涛，携程前端开发工程师，负责机票主流程预订、React Native技术栈相关开发工作。
在前面的文章中，我曾说过 React Native 很棒，因为它能让我们使用原生 UI 来开发应用。React Native 应用的用户体验要比使用 WebView UI 的好很多。但是，“原生”的真正含义到底是什么呢？什么是 WebView UI ？什么原生 UI 比 WebView UI 好呢？React Native 相比于其他移动端框架 (比如 PhoneGap、Cordova 和 Ionic) 又如何呢？
对于app而言，一款应用往往涉及到很多的页面，而页面之间的跳转Android和iOS实现也各不相同。在iOS上，系统为我们提供了UINavigationController控件用来专门控制页面的跳转，iOS的实现思路很清晰，为按钮添加action事件，点击之后跳转到指定的页面即可。例如： //定义一个Button，点击后跳转到另一个页面 UIButton * button=[UIButton buttonWithType:UIButtonTypeSystem]; button.frame=C
随着各种多端技术的蓬勃发展，如今的移动端和前端早已不再拘泥于自身的边界，而是不断延伸、扩展和融合，逐步向着真正的大前端技术迈进。跨端技术也从早期的Cordova/PhoneGap、纯H5页面发展到如今的ReactNative（以下简称RN）、Weex、小程序、Flutter群雄并存的局面。各种技术栈各有优劣和特点，技术选型需视团队自身情况而定，没有绝对好坏之分。然而在实际开发中，并不是只选用一种技术栈，那么研究多种技术栈融合和嵌套使用的就有了迫切的必要性。
目前，移动开发技术主要分为原生开发和跨平台开发两种。其中，原生应用是指在某个特定的移动平台上，使用平台所支持的开发工具和语言，直接调用系统提供的API所开发的应用。 原生开发的主要优势体现在： 1.可以快速访问本平台的全部功能，比如摄像头、GPS等； 2.原生应用的速度快、性能高，而且可以实现比较复杂的动画和绘制效果，用户体验较好。 原生开发的缺点也很明显，主要体现在： 1.开发成本较高，不同的平台必须维护不同的代码，人力成本也会随之增加； 2.有新的功能需要更新时，只能进行版本升级。 随着移动互联网的高速发展，在很多的业务场景下，传统的纯原生开发已经不能满足日益增长的业务需求，主要表现在以下两个方面： 1.应用动态化的需求增大。当需求发生变化，或者是需要增加新的功能时，传统的纯原生应用开发只能通过版本的升级来更新内容，然而应用的上架和审核都需要一定的时间。因此，开发人员迫切地希望进行应用内容的更新时，可以不更新版本，提升工作效率。 2.业务需求变化快，开发成本变高。原生开发一般需要技术团队对iOS、Android两个开发平台进行维护。当版本更新迭代时，开发和测试的成本都会增加。 针对上述两个问题，跨平台框架应运而生。
目前，移动开发技术主要分为原生开发和跨平台开发两种。其中，原生应用是指在某个特定的移动平台上，使用平台所支持的开发工具和语言，直接调用系统提供的API所开发的应用。
2018年，我们开源了React Native组件库——beeshell 1.0。时隔一年，我们对React Native组件库继续优化，实现beeshell 2.0升级，开源38个功能。希望更好的服务社区，同时也希望利用社区力量丰富React Native组件库。
需求模仿腾讯课堂视频播放详情页面，效果如图： 1外层滚动控件到顶部，内层控制滚动 2内层滚动到顶部，外层控制滚动 835108-20170331111709149-156183149.gif 835108-20170331111723820-1491053367.gif 基本思路：是最外层有个父ScrollView,子tab页面中有ListView（React-native原生实现也是ScrollView），现在外部的ScrollView设定一个固定高度（屏幕高度+视频高度一半），接下来解决的难点是要
React是一个纯JS的UI库，只能干HTML/CSS/JS 提供的Web服务（新的H5 API不一定支持）， React-Native厉害在于它能打通JS和Native Code, 让JS能够调用丰富的原生接口,充分发挥硬件的能力, 实现非常复杂的效果,同时能保证效率和跨平台性。
本文出自《React Native学习笔记》系列文章。 在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。 提示：生产环境release (production)
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。 提示：生产环境release (production) 下Developer Menu是不可用的。 如何开启Dev
作为前端开发者，各种框架的层出不穷，促使我们要不断学习才能防止落后，但是我们不可能做到每个框架都有学习的时间，我们只需要掌握流行的，坑少的即可。从以下三个方面了解目前流行的前端开发框架。
React Native 有一个内置的命令行界面，你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它，而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目：npx
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
