RN8_React-Native知识点3之-基本控件（2）

RN8_知识点之-基本控件（2）

Switch

必须使用onValueChange回调来更新value属性以响应用户的操作。

属性方法

1.      View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.      disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false

3.      onValueChange function 方法，当该组件的状态值发生变化的时候回调方法

4.      value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false

picker

本组件可以在iOS和Android上渲染原生的选择器（Picker）

属性方法：

1、View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2、onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

l  itemValue:该属性值为被选中的item的属性值

l  itemPosition:该选择器被选中的item的索引position

3、selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字

4、stylepickerStyleType 该传入style样式，设置picker的样式风格

5、enabled bool 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择

6、mode enum('dialog','dropdown')  选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格

l  'dialog': 该值为默认值，进行弹出一个模态dialog(弹出框)

l  'dropdown':以picker视图为基础，在该视图下面弹出下拉框

7、prompt string  设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题

ViewPagerAndroid

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

方法属性

1、View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2、initialPage number  ViewPagerAndroid初始索引页，不过我们可以使用setPage方法来更新页码，通过onPageSelected方法来监听页面滑动。

3、keyboardDismissMode enum('none','on-drag')  枚举类型，进行设置在拖拽滑动的过程中是否要显示键盘。

l  'none'  默认值,在拖拽中不隐藏键盘

l  'on-drag'   当拖拽滑动开始的时候隐藏键盘

4、onPageScroll function 方法，该方法在页面进行滑动的时候执行(不管是因为页面滑动动画原因还是由于页面之间的拖拽以及滑动原因).该会回调传入的event.nativeEvent对象会有携带如下参数:

l  'position'   从左起开始第一个可见的页面的索引

l  'offset'  该value值的范围为[0,1)，该用来代表当前页面的却换的状态。值x代表该索引页面(1-x)的范围可见，另外x范围代表下一个页面可见的区域

5、onPageScrollStateChanged function 该回调方法会在页面滚动状态发生变化的时候进行调用。页面的滚动状态有下面三种情况:

l  'idle' 该表示当前用户和页面滚动没有任何交互

l  'dragging'  拖动中，该表示当前页面正在被拖拽滑动中

l  'settling'   该表示存在页面拖拽或者滑动的交互。页面滚动正在结束。并且正在关闭或者打开动画。

6、onPageSelected function 方法该在页面进行拖拽滑动切换完成之后回调。该方法回调参数中的event.nativeEvent对象会携带如下一个属性 : 'position'  该属性代表当前选中的页面的索引.

ListView

一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。

高级特性：

1、 给每段/组(section)数据添加一个带有粘性的头部（类似iPhone的通讯录，其首字母会在滑动过程中吸附在屏幕上方）；

2、 在列表头部和尾部增加单独的内容；

3、 在到达列表尾部的时候调用回调函数(onEndReached)

4、 还有在视野内可见的数据变化时调用回调函数(onChangeVisibleRows)

5、 一些性能方面的优化：

滚动的更加平滑，尤其是在动态加载可能很大（或者概念上无限长的）数据集的时候：

l  只更新变化的行 - 提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据（即：数据是否发生了变化）参见ListViewDataSource

l  限制频率的行渲染 - 默认情况下，每次消息循环只有一行会被渲染（可以用pageSize属性配置）。这把较大的工作分散成小的碎片，以降低因为渲染而导致丢帧的可能性。

属性方法

1、 ScrollView相关属性样式全部继承

2、 dataSource   ListViewDataSource  设置ListView的数据源

3、 initialListSize  number  进行设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能

4、 onChangeVisibleRows  function  (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式，changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见，false代表在视图之外不可见的行。

5、 onEndReachedThreshold  number 当偏移量达到设置的临界值调用onEndReached

6、 onEndReached function 方法，当所有的数据项行被渲染之后，并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。

7、 pageSize   number 每一次事件的循环渲染的行数

8、 removeClippedSubviews  bool  该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。

9、 renderFooter function 方法  ()=>renderable ，在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候，可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部

10、         renderHeader  function 方法 使用情况和上面的renderFooter差不多

11、         renderRow function 方法  (rowData,sectionID,rowID,highlightRow)=>renderable   该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。

12、         renderScrollComponent function 方法(props)=>renderable  该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView

13、         renderSectionHeader function(sectionData,sectionID)=>renderable   如果设置了该方法，这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候，该会处于对应的内容的顶部，然后开始滑动的时候，该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图，然后被替代为止。

14、         renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果设置该方法，会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。

15、         scrollRenderAheadDistancenumber  进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

 

DatePickerIOS

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

1、Promise<Object>open(options:Object)   staitc,静态方法，使用该方法进行加载弹出一个标准的Android时间日期选择器。该options(可选)参数有以下三种对象：

①:'date'   日期Date对象或者时间戳以毫秒单位-日期已默认格式显示

②:'minDate'  日期Date对象或者时间戳以毫秒单位-可以选择的最小时间

③:'maxDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最大时间

options = {date: this.state.maxDate,maxDate:new Date()}

2、dateSetAction(),static静态方法，选择时间日期选择器

3、dismissedAction(),static静态方法，关闭时间日期选择器

 

TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback

TouchableHighlight

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

TouchableNativeFeedback

正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。

TouchableOpacity

可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。

TouchableWithoutFeedback

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

 

属性方法

1、 accessibilityComponentType  View.AccessibilityComponentType  设置可访问的组件类型

2、 accessibilityTraitsView.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征

3、 accessible  bool  设置当前组件是否可以访问

4、 delayLongPress  number  设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间

5、 delayPressIn  number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间

6、 delayPressOut  number 设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间

7、 onLayout  function  当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}

8、 onLongPress function 方法，当用户长时间按压组件(长按效果)的时候调用该方法

9、 onPress function 方法当用户点击的时候调用(触摸结束)。但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)

10、         4onPressIn  function 用户开始触摸组件回调方法

11、         onPressOut function 用户完成触摸组件之后回调方法

12、         pressRetentionOffset{top:number,left:number,bottom:number,right:number}   该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候，该组件会重新进行响应。