React Native的一些常用组件

水深无声 2022-03-31 08:52 223阅读 0赞

# React Native的一些常用组件 #

本篇文章主要为学习笔记记录，记录一些React Native比较常用的组件

## HTML元素与RN原生组件 ##

<table> 
 <thead> 
  <tr> 
   <th>HTML</th> 
   <th>RN</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>div</td> 
   <td>View</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>Image</td> 
  </tr> 
  <tr> 
   <td>span, p</td> 
   <td>Text</td> 
  </tr> 
 </tbody> 
</table>

#### 1. 文本组件（Text） ####

RN开发中最基本的组件之一，凡是纯文本都需要用Text包起来。

#### 2.图片组件（Image） ####

用于加载本地图片或者网络图片

**RN出了ImageBackground组件，跟html里的backgroundimage效果类似，用法跟Image相似，这里只介绍Image一些属性**

###### Image的属性 ######

1.  resizeMode：cover， contain，stretch（类似于background-size
2.  backfaceVisibility： visible， hidden
3.  backgroundColor
4.  borderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadius、borderTopRightRadius：圆角大小
5.  borderColor：边框颜色
6.  borderWidth：边框宽度
7.  opacity：设置透明度
8.  overflow

#### 3.TextInput组件 ####

输入框组件。

###### TextInput常用属性 ######

1.  autoCAPltalize：控制TextInput是否自动将特定字符切换为大写。 none（不切换）， sentences（首字母大写），words（单词首字母大写）， characters（每个字母大写）
2.  placeholder
3.  autoCorrect：拼音自动修正功能（默认开启true）
4.  autoFocus： 文本焦点获取，默认关闭（false）
5.  maxLength：文本最大长度
6.  editable： 文本是否可以输入
7.  keyboardType：键盘显示类型，多种，具体参数看官方文档
8.  multiline：设置可以输入多行文字，默认false
9.  numberOfLinesnumber：设置文本输入框行数，需要multiline先设为true
10. textAlign
11. onBlur()：文本框失去焦点监听回调方法
12. onChange()：文本框内容发生改变回调方法
13. onChangeText()：文本框内容发生改变时的回调方法，与上一个不同的是，改变后的文件内容会作为参数传递
14. onEndEditing()：文本输入结束，调用次此回调
15. onFocus()：文本获取焦点时回调方法
16. onSubmitEditing()：编辑提交时回调方法

#### 4.ScrollView组件 ####

当需要展示的内容比较多，超出一屏时，使用该组件，可以滚动窗口以看到一屏以外的内容。将子组件包在该组件里可以达到滚动的效果，不过ScrollView需要有一个确定的高度才能正常工作。

###### ScrollView常用属性 ######

1.  horizontal：水平滚动，默认为false，即垂直滚动
2.  refreshControl：指定RefreshControl组件，提供下拉刷新功能
3.  onContentSizeChange() ：滚动内容试图发生变化时调用
4.  onScroll()：滚动过程调用，scrollEventThrottle属性控制调用的频率
5.  scrollTo(\{x,y,animated\})：滚动到指定的x,y偏移处，animated为是否启用平滑滚动动画

今天先记录这些常用组件。