nuke-components

Components

• category: UI
• chinese: 原件
• type: UI组件

---

View

View 是一个容器组件，类似于 web 端 div，它可以任意嵌套，但嵌套层数过深可能会导致页面在安卓5.0以下或部分机型闪退。 View 有如下默认样式：

position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;

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.log('onFocus')}
		onBlur={() => console.log('onBlur')}
		onInput={() => console.log('onInput')}
		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" />