React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。

2022-11-12 13:29:23

对React-Native的学习，从熟悉基本控件开始。

View

属性方法

序号 名称 属性Or方法 类型 说明

1

 accessibilityLabel 属性 string  

2

accessible

 属性

bool

 当为true时，表示该元素是可以进行访问，

默认情况下所有可触摸的元素控件都是可以访问的

3

 onAccessibilityTap 方法

function

 该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势

4

 onLayout 方法

function

 当组件的布局发生变动的时候，会自动调用下面的方法

:{nativeEvent: { layout: {x, y, width, height}}}。

该事件当重新计算布局的时候会立即进行触发，不过界面可能不会立即刷新，

特别当布局动画正在加载中的时候。

5

 onMagicTap 方法

function

 当accessible为true的时候，当用户双指点击(Magic Tap)的时候，进行触发

风格样式

在React Native中的Style风格布局，其实和CSS样式有很多相似的地方，这边介绍一下:

Style标签 说明  Style标签 说明
FlexBox 弹性布局(详细点击了解)

transforms

 动画属性(详细点击了解)
backfaceVisibility enum('visible', 'hidden')定义界面翻转的

时候是否可见

 backgroundColor 背景颜色
borderColor 边框颜色,这边几个就是代表上下左右变宽的颜色borderTopColor,borderRightColor,

borderBottomColor,borderLeftColor

 borderRadius 边框圆角大小，其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,

borderBottomLeftRadius,borderBottomRightRadius
borderStyle 边框线的风格,这个和CSS样式一样的

,enum('solid', 'dotted', 'dashed')

 borderWidth 边框宽度，另外四个是上下左右的边框宽度:borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth
opacity 设置透明度 overflow 设置内容超过容器显示还是隐藏
elevation 高度，设置Z轴，可以产生立体效果    

下面是几个特殊的属性，这边直接介绍所有平台通用以及只在Android平台有效果的属性

①.testID  (全平台)

可以根据该testID在测试的时候定位该View

②:accessibilityComponentType(android平台)

定义是否该UI组件和原生组件一致化处理

③.accessibilityLiveRegion  enum('none','polite','assertive')  (android平台)

该当View发生更新时候的，是否需要通过用户，不过该只对Android4.4以及以上的平台设备有效果

④.collapsable (android平台)

布局合并优化使用

⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平台)

设置视图响应事件等级

⑥.needsOffscreenAlphaCompositing  (android平台)

设置View是否需要渲染和半透明度效果处理的先后次序。

⑦.renderToHardwareTextureAndroid  (android)

设置是否需要GPU进行渲染

Text

属性方法(主要一些可用的属性)
①.allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用
②.numberOfLines (number):进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了。
③.onLayout (function) 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 该方法当文本发生点击的时候调用该方法.

风格样式

1..继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)
2.color:字体颜色
3..fontFamily 字体名称
4..fontSize  字体大小
5..fontStyle   字体风格(normal,italic)
6..fontWeight  字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
7..textShadowOffset 设置阴影效果{width: number, height: number}
8..textShadowRadius 阴影效果圆角       9..textShadowColor 阴影效果的颜色
10.letterSpacing 字符间距            11.lineHeight 行高
12.textAlign   文本对其方式("auto", 'left', 'right', 'center', 'justify')
13.textDecorationLine  横线位置 ("none", 'underline', 'line-through', 'underline line-through')
14.textDecorationStyle   线的风格("solid", 'double', 'dotted', 'dashed')
15.textDecorationColor  线的颜色       16.writingDirection  文本方向("auto", 'ltr', 'rtl')

Image

属性方法

1.onLayout   (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:

{nativeEvent: {layout: {x, y, width, height}}}.

2.onLoad (function):当图片加载成功之后，回调该方法

3.onLoadEnd (function):当图片加载失败回调该方法，该不会管图片加载成功还是失败

4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法

5.resizeMode  缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

6.source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

样式风格

1.FlexBox  支持弹性盒子风格

2.Transforms  支持属性动画                3.resizeMode  设置缩放模式

4.backgroundColor 背景颜色

5.borderColor     边框颜色              6.borderWidth 边框宽度

7.borderRadius  边框圆角

8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

9.tintColor  颜色设置         10.opacity 设置不透明度0.0(透明)-1.0(完全不透明)

TextInput

属性方法(这边讲解平台公用以及Android生效的属性方法)
3.1.View 支持View的相关属性
3.2.autoCapitalize  控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters')

  • none:不自动切换任何字符成大写
  • sentences:默认每个句子的首字母变成大写
  • words:每个单词的首字母变成大写
  • characters:每个字母全部变成大写

3.3.autoCorrect  bool  设置拼写自动修正功能 默认为开启(true)
3.4.autoFocus bool  设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法)
3.5.defaultValue  string 给文本输入设置一个默认初始值。
3.6.editable bool  设置文本框是否可以编辑 默认值为true,可以进行编辑
3.7.keyboardType  键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

  • default
  • numeric            数字键盘
  • email-address  邮箱地址

3.8.maxLength  number  可以限制文本输入框最大的输入字符长度
3.9.multiline bool  设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)
3.10.onBlur  function 监听方法，文本框失去焦点回调方法
3.11.onChange function 监听方法,文本框内容发生改变回调方法
3.12.onChangeText  function监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容
3.13.onEndEditing  function监听方法，当文本结束文本输入回调方法
3.14.onFocus  function 监听方法  文本框获取到焦点回调方法
3.15.onLayout  function监听方法  组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height}
3.16.onSubmitEditing function监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效
3.17.placeholder string 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除
3.18.placeholderText Color  string 设置默认信息颜色(placeholder)
3.19.secureTextEntry  bool 设置是否为密码安全输入框 ，默认为false
3.20.style 风格属性  可以参考Text组件风格
3.21.value  string 输入框中的内容值
以上是一些Android，iOS平台通用的属性，下面根据官网的文档，我这边组要讲解一下适用于Android平台的属性方法
3.22.numberOfLines number设置文本输入框行数，该需要首先设置multiline为true,设置TextInput为多行文本。
3.23.textAlign 设置文本横向布局方式 可选参数('start', 'center', 'end')
3.24.textAlignVertical 设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')
3.25.underlineColorAndroid  设置文本输入框下划线的颜色

ProgressBarAndroid

属性方法

3.1.支持View控件的属性方法 (这些属性是从View控件中继承下来)  例如:大小,布局,边距啊

3.2.color  设置进度的颜色属性值

3.3.indeterminate 设置是否要显示一个默认的进度信息，该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false

3.4.progress  number  设置当前的加载进度值(该值在0-1之间)

3.5.styleAttr    进度条框的风格 ，可以取的值如下:

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

Navigator

  • Navigator.SceneConfigs.PushFromRight (默认)
  • Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  • Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump
  • Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
  • Navigator.SceneConfigs.VerticalUpSwipeJump
  • Navigator.SceneConfigs.VerticalDownSwipeJump

ScrollView

属性方法

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

3.2.contentContainerStyle  样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。

3.3.horizontal   表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

3.4.keyboardDismissMode   枚举类型表示键盘隐藏类型，可选值('none', "interactive", 'on-drag')  三个值的意义分别如下:

  • none  默认值，表示在进行拖拽滑动的时候不隐藏键盘
  • on-drag   表示在进行拖拽滑动开始的时候隐藏键盘
  • interactive  表示当拖拽触摸移动的同时隐藏键盘，向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持，所以会和'none'一样的效果。

3.5.keyboardShouldPersistTaps  该属性默认为false，表示如果当前是textinput控件，并且键盘是弹出状态的话，点击textinput之外地方，会进行隐藏键盘。反之不会有效果，键盘还是成打开状态。

3.6.onContentSizeChange  function  该当滚动视图的内容尺寸大小发生变化的时候进行调用

3.7.onScroll  function  该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

3.8.refreshControl   element 设置元素控件，该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.

3.9.removeClippedSubviews  测试属性 当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除，该设置可以提高滚动的性能。

3.10.showsHorizontalScrollIndicator   该值设置是否需要显示横向滚动指示条

3.11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条

3.12.sendMomentumEvents   当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置，该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来，然后之前设置的方法进行捕捉。

ToolbarAndroid

属性方法

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

3.2.actions 设置功能列表信息属性 传入的参数信息为: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]   进行设置功能菜单中的可用的相关功能。该会在显示在组件的右侧(显示方式为图标或者文字)，如果界面上面区域已经放不下了，该会加入到隐藏的菜单中(弹出进行显示)。该属性的值是一组对象数组，每一个对象包括以下以下一些参数:

  • title: 必须的，该功能的标题
  • icon: 功能的图标  采用该代码进行获取 require('./some_icon.png')
  • show: 该设置图标直接显示，还是隐藏或者显示在弹出菜单中。always代表总是显示,ifRoom代表如果Bar中控件够进行显示，或者never代表使用直接不显示
  • showWithText  boolean 进行设置图标旁边是否要显示标题信息

3.3.contentInSetEnd  number 该用于设置ToolBar的右边和屏幕的右边缘的间距。

3.4.contentInsetStart number 该用于设置ToolBar的左边和屏幕的左边缘的间距。

3.5.logo  optionalImageSource  可选图片资源  用于设置Toolbar的Logo图标

3.6.navIcon optionalImageSource 可选图片资源 用于设置导航图标

3.7.onActionSelected function方法 当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息

3.8.onIconClicked function 当图标被选中的时候回调方法

3.9.overflowIcon  optionalImageSource 可选图片资源 设置功能列表中弹出菜单中的图标

3.10. rtl   设置toolbar中的功能顺序是从右到左(RTL:Right To Left)。为了让该效果生效，你必须在Android应用中的AndroidMainifest.xml中的application节点中添加android:supportsRtl="true"，然后在你的主Activity(例如:MainActivity)的onCreate方法中调用如下代码:setLayoutDirection(LayoutDirection.RTL)。

3.11.subtitle  string 设置toolbar的副标题

3.12.subtitleColor  color  设置设置toolbar的副标题颜色

3.13.title string  设置toolbar标题

3.14.titleColor color 设置toolbar的标题颜色

Switch

属性方法

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false
  • onValueChange function 方法，当该组件的状态值发生变化的时候回调方法
  • value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false

Picker

属性方法

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • onValueChange  function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

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

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

  • selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字
  • style pickerStyleType 该传入style样式，设置picker的样式风格
  • enabled bool 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择
  • mode enum ('dialog','dropdown')  选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格

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

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

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

ViewPagerAndroid

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • initialPage  number  ViewPagerAndroid初始索引页，不过我们可以使用setPage方法来更新页码，通过onPageSelected方法来监听页面滑动。
  • keyboardDismissMode  enum('none','on-drag')  枚举类型，进行设置在拖拽滑动的过程中是否要显示键盘。

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

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

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

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

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

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

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

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

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

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

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

属性方法

  • accessibilityComponentType   View.AccessibilityComponentType  设置可访问的组件类型
  • accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征
  • accessible  bool  设置当前组件是否可以访问
  • delayLongPress  number  设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间
  • delayPressIn  number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间
  • delayPressOut  number 设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间
  • onLayout  function  当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}
  • onLongPress function 方法，当用户长时间按压组件(长按效果)的时候调用该方法
  • onPress function 方法 当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)
  • onPressIn  function  用户开始触摸组件回调方法
  • onPressOut function 用户完成触摸组件之后回调方法
  • pressRetentionOffset {top:number,left:number,bottom:number,right:number}   该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候，该组件会重新进行响应。

ListView

属性方法

  • ScrollView相关属性样式全部继承
  • dataSource   ListViewDataSource  设置ListView的数据源
  • initialListSize  number  进行设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能
  • onChangeVisibleRows  function  (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式，changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见，false代表在视图之外不可见的行。
  • onEndReachedThreshold  number 当偏移量达到设置的临界值调用onEndReached
  • onEndReached function 方法，当所有的数据项行被渲染之后，并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。
  • pageSize   number 每一次事件的循环渲染的行数
  • removeClippedSubviews  bool  该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。
  • renderFooter function 方法  ()=>renderable ，在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候，可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部
  • renderHeader  function 方法 使用情况和上面的renderFooter差不多
  • renderRow function 方法   (rowData,sectionID,rowID,highlightRow)=>renderable   该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。
  • renderScrollComponent function 方法 (props)=>renderable  该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView
  • renderSectionHeader function (sectionData,sectionID)=>renderable   如果设置了该方法，这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候，该会处于对应的内容的顶部，然后开始滑动的时候，该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图，然后被替代为止。
  • renderSeparator function  (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果设置该方法，会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。
  • scrollRenderAheadDistance number  进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

Cilpboard

使用范例：

React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。
  async _setClipboardContent(){

    Clipboard.setString('Hello World');

    try {

      var content = await Clipboard.getString();

      ToastAndroid.show('粘贴板的内容为:'+content,ToastAndroid.SHORT);

    } catch (e) {

      ToastAndroid.show(e.message,ToastAndroid.SHORT);

    }

  }
React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。
 

DatePickerAndroid

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静态方法，关闭时间日期选择器

React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。
  async showPicker(stateKey, options) {

    try {

      var newState = {};

      const {action, year, month, day} = await DatePickerAndroid.open(options);

      if (action === DatePickerAndroid.dismissedAction) {

        newState[stateKey + 'Text'] = 'dismissed';

      } else {

        var date = new Date(year, month, day);

        newState[stateKey + 'Text'] = date.toLocaleDateString();

        newState[stateKey + 'Date'] = date;

      }

      this.setState(newState);

    } catch ({code, message}) {

      console.warn(`Error in example '${stateKey}': `, message);

    }

  }
React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。
上一篇：浅谈Java中的Set、List、Map的区别（转）


下一篇：【看过不等于学会】一切从资产梳理开始--bypass