deprecated component
Components
- category: UI
- chinese: 原件
- type: UI 组件
View
View 是一个容器组件,类似于 web 端 div,它可以任意嵌套,但嵌套层数过深可能会导 致页面在安卓 5.0 以下或部分机型闪退。 View 有如下默认样式:
Text
Text 用于显示文本,类似于 web 端的 span 标签。 Text 标签不支持嵌套。
Image
API
属性配置 | 说明 | 类型 | 默认值 |
---|---|---|---|
source | 格式 {uri:"xxx"} | object | |
style | 必须写宽高,否则无法渲染 | object | |
resizeMode | 组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | 枚举类型,可选center contain cover stretch |
stretch |
onLoad | 图片 onLoad 方法,其中 e.size 可返回图片真实宽高 | function(e) |
- resizeMode 释义 - contain : 包含,在区域内图片完全展示,不拉伸,不裁剪 - cover : 覆盖,覆盖整个区域,可能图片本身会被部分被挡住而不显示,等比缩放,可能会裁 剪 - stretch : 拉伸,拉伸图片以撑满整个区域 - center : 图片可能会被缩小以完全 展示,但如果图片过小不会放大
例:
<Image source= uri: 'https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg' style= quality: 'original' width: '100rem' height: '100rem' resizeMode='cover'/>;
TextInput
TextInput 是唤起用户输入的基础组件。当定义 multiline 输入多行文字时其功能相当于 textarea。
它支持的属性有:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
multiline【即将废弃】 | 定义该属性文本框可以输入多行文字 | boolean | false |
multiple | 定义该属性文本框可以输入多行文字 | boolean | false |
accessibilityLabel | 为元素添加标识 | string | 无 |
autoComplete | 添加开启自动完成功能 | boolean | false//todo |
autoFocus | 添加开启获取焦点 | boolean | false |
editable | 文本框是否可编辑 | boolean | true |
keyboardType【即将废弃】 | 设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric |
string | default |
type | 设置弹出哪种软键盘 可用的值有text url password tel date time email |
string | text |
maxLength | 设置最大可输入值 | number | 无 |
maxNumberOfLines | 当文本框为 mutiline 时设置最多的行数 | number | 无 |
numberOfLines | 同上设置行数 | number | 无 |
placeholder | 设置文本框提示 | string | 无 |
password【即将废弃】 | 文本框内容密码显示 | ||
secureTextEntry【即将废弃】 | 同上文本框内容密码显示 | ||
value | 文本框的文字内容 | string | 无 |
style | 自定义样式 | Object | 无 |
同时 TextInput 响应下面几个事件:
- onBlur: 文本框失焦时调用此函数。
onBlur={() => console.log(' 失焦啦 ')}
- onFocus: 文本框获得焦点时调用此函数
- onChange: 文本框内容变化时调用此函数
- onInput: 文本框输入内容时调用此函数
使用示例:
<TextInput placeholder="Enter text to see events" autoFocus multiline onFocus= console onBlur= console onInput= console style= width: '1000rem' height: '1000rem' borderWidth: '1rem' borderStyle: 'solid' borderColor: '#cccccc' />;
ScrollView
ScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。
ScrollView
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
horizontal | 是否横向 | boolean | false |
scrollEventThrottle | 在滚动过程中,scroll 事件被调用的频率(默认值为 100),用于滚动的节流 | number | 100 |
showsHorizontalScrollIndicator | 是否显示水平滚动条 | boolean | true |
showsVerticalScrollIndicator | 是否显示垂直滚动条 | boolean | true |
onEndReachedThreshold | 设置加载更多的偏移 | string | 500rem |
onEndReached | 滚动到底部时的事件(diff 为 onEndReachedThreshold) | event | 无 |
resetLoadmore 实例方法
由业务自行控制的是否触发 loadmore 事件
当 onEndReached 触发,但是数据没有变化或者数组变短,native 认为不需要再触发 onEndReached 事件了。
此时调用 resetLoadmore ,可以清除某个标记位,让 onEndReached 可以再次触发。
TouchableHighlight
TouchableHighlight 定义简单的 touch 事件。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
onPress | 点击事件 | function(e) | |
activeStyle | 手指按下时的样式 | object |
使用示例:
<TouchableHighlight onPress= {} style= backgroundColor: '#3089dc' height: '60rem' justifyContent: 'center' alignItems: 'center' activeStyle= backgroundColor: '#cccccc' > Hello Nuke</TouchableHighlight>;
Switch
Switch 是状态切换的开关按钮组件。
Switch
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 尺寸,可选medium ,small |
string | medium |
disabled | 开关是否可交互 | boolean | true |
checked | 开关默认状态开启或关闭 | boolean | false |
onValueChange | 值改变时调用此函数 | event | 无 |
Video
视频播放组件,在 h5 端即 html5 的 video 标签。
因此如果用在 h5 端,在部分安卓机型上,可能有较多兼容性问题。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
autoPlay | 设置视频自动播放 | boolean | false |
src | 视频地址 | string | 无 |
使用示例:
<Video autoPlay src="//path/to/url" />