React Native的一些常用组件

React Native的一些常用组件

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

HTML元素与RN原生组件

HTML	RN
div	View
img	Image
span, p	Text

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为是否启用平滑滚动动画

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