react-native 组件查询

ActivityIndicator ————显示一个圆形的 loading 提示符号。


Button————一个简单的跨平台的按钮组件。可以进行一些简单的定制。


DatePickerIOS————使用DatePickerIOS来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件,所以你必须监听onDateChange回调函数并且及时更新date属性来使得组件更新,否则用户的修改会立刻被撤销来确保当前显示值和props.date一致。


DrawerLayoutAndroid————封装了 Android 平台DrawerLayout的 React 组件。抽屉(通常用于导航切换)是通过renderNavigationView方法渲染的,并且 DrawerLayoutAndroid 的直接子视图会成为主视图(用于放置内容)。导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。


FlatList---------高性能的简单列表组件,支持下面这些常用的功能:

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行(ScrollToIndex)。
如果需要分组/类/区(section),请使用.


Image--------用于显示多种不同类型图片的 React 组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。


ImageBackground--------熟悉Web的开发人员的常见功能请求是background-image。要处理此用例,您可以使用具有相同道具的组件,并在其上添加要在其上进行分层的任何子项。

您可能不想在某些情况下使用,因为实现非常简单。请参阅的源代码进行更深入的了解,并在需要时创建自己的自定义组件。

请注意,您必须指定一些宽度和高度样式属性。


KeyboardAvoidingView-----------本组件用于解决一个常见的尴尬问题:手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置,调整自身的 position 或底部的 padding,以避免被遮挡。


MaskedViewIOS----------渲染一个带蒙版的视图。蒙版元素在maskElement这个 prop 中指定。


Modal---------Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。


NavigatorIOS----------NavigatorIOS是一个包装器UINavigationController,使您能够实现导航堆栈。它与使用本机应用程序时的工作方式完全相同,UINavigationController从UIKit提供相同的动画和行为。

顾名思义,它仅适用于iOS。查看React NavigationJavaScript中的跨平台解决方案,或查看这些组件中的任何一个以获取本机解决方案:本机导航,react-native-navigation。

要设置导航器,请为initialRoute道具提供路径对象。路径对象用于描述您的应用导航到的每个场景。initialRoute代表导航器中的第一条路线。


Picker-----------本组件可以在iOS和Android上渲染原生的选择器(Picker)。


ProgressBarAndroid------------封装了Android平台上的ProgressBar的React组件。这个组件可以用来表示应用正在加载或者有些事情正在进行中。


RefreshControl----------这一组件可以用在ScrollView或FlatList内部,为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置(scrollY: 0),此时下拉会触发一个onRefresh事件。


ScrollView------------一个封装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。

记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间,但前提条件是所有的父容器本身也设置了flex或者指定了高度,否则就会导致无法正常滚动,你可以使用元素查看器来查找问题的原因。

ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

ScrollView和FlatList应该如何选择?ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂,使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示,可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图,显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素,只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多,因而API在使用上也更为繁琐。除非你要渲染的数据特别少,否则你都应该尽量使用FlatList,哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线,支持多列布局,无限滚动加载等等。


SectionList----------高性能的分组(section)列表组件,支持下面这些常用的功能:

完全跨平台。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持分组的头部组件。
支持分组的分隔线。
支持多种数据源结构
支持下拉刷新。
支持上拉加载。
如果你的列表不需要分组(section),那么可以使用结构更简单的。


SegmentedControlIOS------------使用SegmentedControlIOS来在iOS设备上渲染一个UISegmentedControl组件。这是一个分段显示多个选项的组件。


Slider-----------用于选择一个范围值的组件。


StatusBar-----------控制应用状态栏的组件。


Switch--------------跨平台通用的“开关”组件。

注意这是一个“受控组件”(controlled component)。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性,组件只会按一开始给定的value值来渲染且保持不变,看上去就像完全点不动。

@keyword checkbox @keyword toggle @keyword 单选 @keyword 多选


Text---------一个用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理。

在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开。


TextInput------------------TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。


ToolbarAndroid---------------ToolbarAndroid是一个包装了仅限Android平台的工具栏(Toolbar)部件的React组件。一个Toolbar可以显示一个徽标,一个导航图标(譬如汉堡形状的菜单按钮),一个标题与副标题,以及一个功能列表。标题和副标题会在中间显示,徽标和导航图标会在左侧显示,而功能列表则在右侧显示。


TouchableHighlight-------------本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。

在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。

注意TouchableHighlight只支持一个子节点(不能没有子节点也不能多于一个)。如果你希望包含多个子组件,可以用一个View来包装它们。


TouchableNativeFeedback--------------------本组件用于封装视图,使其可以正确响应触摸操作(仅限Android平台)。在Android设备上,这个组件利用原生状态来渲染触摸的反馈。

目前它只支持一个单独的View实例作为子节点。在底层实现上,实际会创建一个新的RCTView节点替换当前的子View,并附带一些额外的属性。

原生触摸操作反馈的背景可以使用background属性来自定义。


TouchableOpacity----------本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。


TouchableWithoutFeedback---------------除非你有一个很好的理由,否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈(然而本组件没有任何视觉反馈),这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一


View--------------作为创建 UI 时最基础的组件,View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View 都会直接对应一个平台的原生视图,无论它是 UIView、


ViewPagerAndroid------------一个允许在子视图之间左右翻页的容器。每一个 ViewPagerAndroid 的子容器会被视作一个单独的页,并且会被拉伸填满 ViewPagerAndroid。


VirtualizedList-----------FlatList和SectionList的底层实现。FlatList 和 SectionList 使用起来更方便,同时也有相对更详细的文档。一般来说,仅当想获得比 FlatList 更高的灵活性(比如说在使用 immutable data 而不是 普通数组)的时候,你才应该考虑使用 VirtualizedList。


WebView-------------------警告请使用此组件的react-native-community / react-native-webview fork。为了减少React Native的表面积,将从React Native核心中删除。有关更多信息,请阅读Slimmening提案。

WebView 创建一个原生的WebView,可以用于访问一个网页。


DatePickerAndroid----------本组件会打开一个标准的 Android 日期选择器的对话框。
___________-

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

墨寂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值