React Native 表格组件：react-native-data-table，纯JS组件，功能强大。支持自定义表头、行、单元格样式。支持编辑单元格和选择列。还能显示子行。 效果图 ?...安装方法 npm install--save react-native-data-table 组件说明 表格组件主要分成以下几部分： DataTable 表格 HeaderCell 列头 Row 行 Cell...单元格 CheckableCell 可选择单元格 EditableCell 可编辑单元格 Expansion 子行 其他使用方法类似于官方的ListView组件 使用示例 import { Cell..., DataTable, Header, HeaderCell, Row, EditableCell, CheckableCell, } from 'react-native-data-table...请不要吝啬你们的Star！ 组件地址 https://github.com/sussol/react-native-data-table
最近在阅读RN的文档，但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家。...不同，下面的列表组件只会渲染当前屏幕可见的元素，这样有利于显示大量的数据。...ViewPagerAndroid 可左右翻页滑动的视图容器。 ActivityIndicator 显示一个圆形的正在加载的符号。 Alert 弹出一个提示框，显示指定的标题和信息。...Modal 一种简单的覆盖全屏的模态视图。 RefreshControl 此组件用在ScrollView及其衍生组件的内部，用于添加下拉刷新的功能。...StatusBar 用于控制应用顶部状态栏样式的组件。
静态图片资源 从0.14版本开始，React Native提供了一个统一的方式来管理iOS和Android应用中的图片。.../my-icon.png')} /> 图片文件的查找会和JS模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager就会去这个组件所在的文件夹下查找my-icon.png。...不过网上提供了第三方的组件react-native-image-picker，这个组件同时支持photo和video，也就是照片和视频都可以用。...我们使用npm安装这个组件： npm install --save react-native-image-picker 典型使用方法 import ImagePickerManager from 'NativeModules...} from 'react-native'; // 导入JSON数据 var productData = require('.
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View...安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen()...import { captureScreen } from "react-native-view-shot"; captureScreen({ format: "jpg", quality:...如果是ScrollView组件，就会截取整个ScrollView的实际高度。 支持的组件 ?...示例源码 https://github.com/forrest23/ReactNativeComponents 组件地址 https://github.com/gre/react-native-view-shot
前面说过，React Native作为一个全新的跨平台开发框架，好多东西还不是很成熟，很多原生的控件还不是很完善，于是好多爱好者便自己封装相关的组件，可以使用oc来封装，也可以使用Swift来封装。...关于封装的原理，大家可以访问我的书的《React Native移动开发实战》。 基础 学习本章知识，需要读者具备一定的OC和Swift语言基础，读者可以从下面的链接中获取学习资料。...Apple 官方引导 Xcode入门 Swift英文文档 UIKit UIKit框架是iPhone应用程序开发中最基本的框架，也是用得最多、最重要的框架，UIKit包含界面相关操作组件集合，读者可以从官方文档中去学习具体的内容...那如何才能是用Swift来编写RN的组件呢，答案就是IOS原生就支持OC和Swift混编应用。...这个文件主要的功能是将OC的文件接口放在一起然后供Swift文件调用，红圈标注出来的意思是如果你想自己手动创建一个bridge文件也是可以的，但是需要做相应的配置。
一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo 近年来，随着移动端对数据可视化的要求越来越高，类似...React Native 开发中，由于使用的是与前端相同的 JavaScript 语言，衔接 Echarts 的工作相对顺畅些，不过一些必要的组件封装还是能够大大提高开发效率的。...WebChart 具体使用可参见 App.js ，style 的设置就和普通的 React Native 组件一样，可使用 flex ，也可设为定值。...Echarts与React Native组件的通信 在 React Native 的 WebView 组件中，提供了 onMessage 和 postMessage 来进行 html 与组件的双向通信，...React Native 组件的通信。
这次介绍的React Native手势密码组件为react-native-gesture-password，纯JavaScript实现，同时支持iOS和安卓平台。 效果图 ?...安装 npm install react-native-gesture-password--save 属性 所有的属性都是可选的。现在列举几个重要属性。...示例 var React = require('react'); var { AppRegistry, } = require('react-native'); var PasswordGesture...= require('react-native-gesture-password'); var Password1 = ''; var AppDemo = React.createClass({...详细说明和示例代码请查看GitHub：https://github.com/Spikef/react-native-gesture-password。
SafeAreaView简介 ReactNative官方从0.50.1版本开始，加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView，为ReactNative开发APP时对iPhone...X的页面适配提供了很大的方便。...SafeAreaView的使用也非常简单，只需要将SafeAreaView嵌套在最根级别的视图中即可，并且在style中加上flex:1等页面样式。
不管在Android还是ios开发中，系统都有Button组件，而在早期的React Native中，系统是不提供Button组件的，一般会使用一个叫做react-native-button的库。...Button组件 Button组件其实就是 Touchable（TouchableNativeFeedback、TouchableOpacity）和Text封装。...accessibilityLabel是用于盲文的，读屏器软件可能会读取这一内容（ colorios表示字体的颜色，android表示背景的颜色 disabled是否可用，如果为true，禁用此组件的所有交互...import React, {Component} from 'react'; import { StyleSheet, View, Button..., ToastAndroid, } from 'react-native'; export default class ButtonDemo extends Component
新的一年，新的开始，祝大家旺旺年旺旺旺！ React Native 图片查看组件：react-native-image-viewer，纯JS组件，小巧快速的图标查看组件。...安装方法 npm i react-native-image-zoom-viewer--save 使用示例 const images = [ { url: 'https://avatars2....Dimensions.get('window').width, }} /> ); } } 主要参数说明 imageUrls 图片url地址的数组...enableImageZoom 是否允许缩放 failImageSource 加载失败时显示的图片 loadingRender 加载loading renderHeader 头部样式 renderFooter...请不要吝啬你们的Star！ 组件地址 https://github.com/ascoders/react-native-image-viewer
这次介绍的这个React Native日历日程组件名叫react-native-calendars，是纯JS开发，可以适配IOS和安卓双平台。...使用方便，功能强大，可以通过配置自定义样式和主题，更重要的是它支持日程显示。下面我们来看看这个组件的使用方法。...安装 npm install --save react-native-calendars 因为是纯JS的，所以不需要link，执行完就可以了。...使用 react-native-calendars主要包含三种子组件，分别是 Calendar（日历）, CalendarList（日历列表）, Agenda（日程），可以根据实际需要选择使用。...组件的GitHub 地址：https://github.com/wix/react-native-calendars，更多的配置和使用方法请点击查看原文查看GitHub上的文档以及示例代码。
React Native 文档查看组件：react-native-doc-viewer，可以在手机上直接打开文档，支持远程和本地文档。...安装方法 npm install react-native-doc-viewer --save react-native link react-native-doc-viewer API说明 openDoc...from 'react-native-doc-viewer'; var RNFS = require('react-native-fs'); var SavePath = Platform.OS ==...示例源码 GitHub - forrest23/ReactNativeComponents: React Native组件大全 微信不让跳转外链，可以点击查看原文来查看外链GitHub内容。...组件地址 GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls
在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，可以看到，特别是0.50之后，React Native的组件库在不断地壮大，React Native也正在越来越稳定...随着版本的升级，React Native引进了一些新的组件中，如FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时一些性能比较差...、无法适应React Native发展的一些老的组件也逐渐被抛弃，如：ListView、Navigator等组件。...下面是一张说明图，来自于网络： FlatList简介 总所周知，为了实现列表的效果，React Native提供了ListView组件，并且通过对ListView进行简单的封装，ListView...但是如果对ListView比较了解的同学都会发现，ListView的性能是非常差的，所以React Native在0.43版本推出了FlatList，FlatList自带上拉下拉的功能，用于替换ListView
React Native（简称RN）列表是基于ScrollView实现的，也就是可以滚动的，然而RN并没有直接使用IOS或Android的原生列表组件，这是因为RN真正调用native代码的过程是异步的...，二Native的渲染要求必须同步渲染的。...在早期版本中，对于列表情况RN采用的是ListView组件，和Android一样，早期的ListView组件性能是非常的差的，在后来的版本中，RN提供了系列用于提高列表组件性能的组件：FlatList和...读者可以在项目的“node_modules/react-native/Libraries/Lists/XXX”文件夹下找到相关的源码。...VirtualizedList VirtualizedList通过维护一个有限的渲染窗口（其中包含可见的元素），并将渲染窗口之外的元素全部用合适的定长空白空间代替的方式，极大的改善了内存消耗以及在有大量数据情况下的使用性能
React Native 弹出框组件：react-native-popup-dialog，纯JS组件，支持动画，支持iOS和Android，安装使用方便。 演示动画 ?...安装方法 npm install--save react-native-popup-dialog 使用示例 import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog...支持三种动画：FadeAnimation（淡入淡出）、ScaleAnimation（缩放）、SlideAnimation（滑动） API说明 dialogTitle – 弹出框标题 width - 弹出框的宽度...0.5就是设备宽度的50% height - 弹出框的宽度，可以写300或者0.5。...请不要吝啬你们的Star！ 组件地址 https://github.com/jacklam718/react-native-popup-dialog
在React Native开发过程中，有时候我们可能需要访问平台的API，但react Native还没有相应的实现，或者是React Native还不支持一些原生的属性，我们需要调用原生代码来实现，或者是我们需要复用一些原来的...Native和原生的类型映射做一个简单的介绍。...import { NativeModules } from 'react-native'; // 这里的MyNativeModule必须对应 // public String getName()中返回的字符串...Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。...： import { DeviceEventEmitter } from 'react-native'; ......
由于其他的原因，对于React Native相关的内容最近没有投入太多的关注，从去年年底出版了《React Native移动开发实战》后，对于React Native的关注就比较少了。...对React Native发展历史比较了解的同学都知道，React Native早期除了性能外，生态也是特别差的，但是在经过了2017年的优化和发展之后，现在跨平台开发如React Native和Weex...并且，随着跨平台生态的逐渐形成，跨平台的组件和文章也越来越多。...今天给大家讲的是一个可以实现悬浮效果的组件，效果如下： 该库的源码地址为：https://github.com/mastermoo/react-native-action-button 安装...在项目中使用如下的命令安装react-native-action-but
概述 今天我们来讲解一下关于 ViewPager 的使用，它是一个允许子视图左右滚动翻页的容器。...我们知道在Android开发中系统有ViewPager这个组件，作用是实现滚动翻页的，在RN中也是有这么一个组件的（ViewPagerAndroid），每一个ViewPagerAndroid的子容器会被视作一个单独的页...offset 一个在[0,1)（大于等于0，小于1）之间的范围，代表当前页面切换的状态。值x表示现在”position”所表示的页有(1 - x)的部分可见，而下一页有x的部分可见。]...import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, ViewPagerAndroid..., TouchableOpacity, Image, View } from 'react-native'; var PAGES = 2; var IMAGE_URIS = [ 'http
前言公司之前一版的手机应用没有做业务、控制分离的处理，导致其他项目参考时，很难复用其中的功能。所以leader决定近期目标是封装一套公司内部用的基础组件和业务组件，目标是快速，试水。...本篇记录一个花费时间较长的组件Radio。...设计一个前端的组件往往是参照常见的App。...// 引入的控件import {Image, Pressable, StyleSheet, Text, View} from 'react-native';。。。...还有一点需要注意的就是做好规范，搭建项目的时候，把eslint的配置统一。包括eslint react的插件，能帮助我们更安全高效的使用和学习React Native。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
