最近在阅读RN的文档，但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家。
所以我通过百度查询，一个一个的查到了这些RN组件的UI表现图，下面呈现给大家
 
阅前必读
首先表示抱歉，我没有注明每幅图片的url来源，这是有原因的，因为当前有很多人的博客转载他人的博客却没有注明出处，如果我莽撞地写上我找到该图片的url地址，那么可能反而会损害原作者本人，如果您看到这篇文章中使用了您的图片，还请您通过评论或者私信告诉我，我将会将您的原创地址添加到图片之后。当然图片的使用权利在原作者本人，我悉听尊便。
 
其他注意点⚠️
1.没有UI表现，纯功能性或者功能性为主的组件下面自然没有列出样式图比如imgaPickerIOS，PushNotificationIOS,  Dimensions,PixelRatio，Animated,CameraRoll,clipBoard,webView，backHandler,PermissionsAndroid，同时非常常用的基础组件和交互组件也没有加上去，因为他们在官网上都有
2.其中有部分样式是在默认样式基础上经过修饰的，同时不能确定这是否是RN最新版本的呈现方式，但是万变不离其宗，一般来说形态不会发生很大的变化

FlatList和SectionList

和一般化用途的ScrollView不同，下面的列表组件只会渲染当前屏幕可见的元素，这样有利于显示大量的数据。

ActionSheetIOS

从设备底部弹出一个显示一个ActionSheet弹出框选项菜单或分享菜单。

AlertIOS

弹出一个提示对话框，还可以带有输入框。

DatePickerIOS

显示一个日期/时间选择器。

ProgressViewIOS

渲染一个UIProgressView进度条。

SegmentedControlIOS

渲染一个UISegmentedControl顶部选项卡布局

TabBarIOS

渲染一个UITabViewController底部选项卡布局

DatePickerAndroid

打开日期选择器。

DrawerLayoutAndroid

渲染一个DrawerLayout抽屉布局。

ProgressBarAndroid

渲染一个ProgressBar进度条。

TimePickerAndroid

打开时间选择器。

ToastAndroid

弹出一个Toast提示框。

ToolbarAndroid

在顶部渲染一个Toolbar工具栏。

ViewPagerAndroid

可左右翻页滑动的视图容器。

ActivityIndicator

显示一个圆形的正在加载的符号。

Alert

弹出一个提示框，显示指定的标题和信息。

KeyboardAvoidingView

一种视图容器，可以随键盘升起而自动移动。

Modal

一种简单的覆盖全屏的模态视图。

RefreshControl

此组件用在ScrollView及其衍生组件的内部，用于添加下拉刷新的功能。

StatusBar

用于控制应用顶部状态栏样式的组件。

React-Native组件样式合集的更多相关文章

  1. React Native 组件样式测试

    View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...

  2. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  3. React Native组件（三）Text组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...

  4. React Native组件（二）View组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...

  5. React Native组件解析(二)之Text

    React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...

  6. React Native组件的结构和生命周期

    React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...

  7. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  8. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  9. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

随机推荐

  1. 自定义ItemToggleView

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  2. cdh5-MariaDB 配置（暂未排版）

    在多数分布MariaDB的设施默认设置使用保守的缓冲区的大小和内存使用. 使用保守的缓冲区大小和内存使用率 Cloudera的数据库管理服务器,监控活动,报告管理,Cloudera 导航,Hive 的 ...

  3. 信息收集框架——recon-ng

    背景:在渗透测试前期做攻击面发现(信息收集)时候往往需要用到很多工具,最后再将搜集到的信息汇总到一块.          现在有这样一个现成的框架,里面集成了许多信息收集模块.信息存储数据库.以及报告 ...

  4. Guava cache使用总结

    缓存分为本地缓存和远端缓存.常见的远端缓存有Redis,MongoDB:本地缓存一般使用map的方式保存在本地内存中.一般我们在业务中操作缓存,都会操作缓存和数据源两部分.如:put数据时,先插入DB ...

  5. 页面性能监控之performance

    页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...

  6. Multiple dex files define Lokhttp3/internal/wsWebSocketProtocol

    Multiple dex files define Lokhttp3/internal/wsWebSocketProtocol 老套路,先晒图 图一:如题,在编译打包时遇到了如上错误,很明显这是一个依 ...

  7. JavaWeb零基础入门-01 基础概念说明

    一.序言 从学校出来到实习,发现学校学的东西太过基础,难于直接运用于工作中.而且工作中,现在都以web开发为主,学校开了web开发相关课程.自己学的不够深入,所以本人自学JavaWeb开发,介于学习巩 ...

  8. 【Python3爬虫】学习分布式爬虫第一步--Redis分布式爬虫初体验

    一.写在前面 之前写的爬虫都是单机爬虫,还没有尝试过分布式爬虫,这次就是一个分布式爬虫的初体验.所谓分布式爬虫,就是要用多台电脑同时爬取数据,相比于单机爬虫,分布式爬虫的爬取速度更快,也能更好地应对I ...

  9. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  10. 还在用if else？策略模式了解一下！

    在公司负责的就是订单取消业务,老系统中各种类型订单取消都是通过if else 判断不同的订单类型进行不同的逻辑.在经历老系统的折磨和产品需求的不断变更,决定进行一次大的重构:消灭 if else. 接 ...