nuke-components

Components

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

---

View

View 是最基础的组件，它支持Flexbox、touch handling等功能，并且可以任意嵌套。

不论在什么容器中，View 都直接对应一个容器的原生视图，就像 web 中的 div 一样。

最简单的示例：

<View>
	<Text>Hi<Text>
</View>

Text

Text 用于显示文本，在 web 中实际上是一个 span 标签而非 p 标签。

Text 标签不支持嵌套，默认展现样式会沾满行。

Text 响应以下事件：

• onPress

例:

<Text style={{
		color: '#3c3c3c',
		fontSize: '20rem'
	}}> 文本内容 </Text>

Image

API

属性配置	说明	类型	默认值
source	格式 {uri:"xxx"}	object
style	必须写宽高，否则无法渲染	object
resizeMode	组件尺寸和图片尺寸不成比例的时候如何调整图片的大小	枚举类型，可选contain cover stretch	stretch

例：

	<Image source={{uri: 'https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg'}} style={{width: '100rem',height: '100rem',}} resizeMode={'cover'}/>
	

TextInput

TextInput 是唤起用户输入的基础组件。 当定义 multiline 输入多行文字时其功能相当于 textarea。

它支持的属性有：

• multiline【即将废弃】: 是否多行
• multiple 是否多行
• accessibilityLabel: 为元素添加标识
• autoComplete: 添加开启自动完成功能
• autoFocus: 添加开启获取焦点
• editable: 默认为true 如果为fase则文本框不可编辑
• keyboardType【即将废弃】: 设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric
• type: 设置弹出哪种软键盘 可用的值有text url password tel date time email
• maxLength: 设置最大可输入值
• maxNumberOfLines: 当文本框为mutiline时设置最多的行数
• numberOfLines: 同上设置行数
• placeholder: 设置文本框提示
• password【即将废弃】: 文本框内容密码显示
• secureTextEntry【即将废弃】: 同上文本框内容密码显示
• style: 设置样式
• value: 文本框的文字内容

同时 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',
				border: '1px solid #000'
		}}
/>

ScrollView

ScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。

它支持的属性有：

• scrollEventThrottle: 这个属性控制在滚动过程中，scroll事件被调用的频率（默认值为100），用于滚动的节流
• horizontal: 设置为横向滚动
• showsHorizontalScrollIndicator: 是否允许出现水平滚动条，默认true
• showsVerticalScrollIndicator: 是否允许出现垂直滚动条，默认true
• onEndReachedThreshold: 设置加载更多的偏移
• onEndReached: 滚动区域还剩 onEndReachedThreshold 的长度时触发（默认值为500） 使用示例：

<ScrollView onEndReachedThreshold={300} onEndReached={()=>{}}>
	<Text style={{
		color:'#ffffff',
		margin:'5rem',
		fontSize:'100rem',
		backgroundColor:"blue"
	}}>
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
			Shake or press menu button for dev menuShake or press menu button for dev menu
	</Text>
</ScrollView>

TouchableHighlight

TouchableHighlight 定义简单的 touch 事件。 使用 TouchableHighlight 我们不用担心复杂的视图结构，也就是说我们不必再担心类似以前 tap 点击穿透这样的问题了。 对于复杂的手势事件，我们可以使用 @ali/rx-panresponder 。

支持的属性：

• onPress: 点击事件

使用示例：

<TouchableHighlight onPress={()=>{}}>Click Me</TouchableHighlight>

Switch

Switch 是状态切换的开关按钮组件。

支持的属性：

• size: 可选medium,small，默认 medium
• disabled: 开关是否可交互 true|false
• checked: 开关默认状态开启或关闭 true|false
• onValueChange: 值改变时调用此函数

使用示例：

	state = {
		c1: true,
	};
	render() {
		return (
			<View style={styles.container}>
				<Text>
					 Switch实例
				</Text>
				<Switch size="small" onValueChange={(value) =>this.setState({c1: value})} checked={this.state.c1}/>
				
			</View>
		);
	}

video

Rx 中的视频播放组件。

支持的属性：

• autoPlay: 设置视频自动播放
• src: 视频地址

使用示例：

<Video autoPlay src="//path/to/url" />