组件作用
从组件名字我们就不得而知 该组件就是一个高级的View组件封装后的模块 主要功能是视图用户操作时显示高亮状态比如(onPress)
实例:
return (
<TouchableHighlight
style={styles.box}
underlayColor='#fff'
onPress={()=>{}}>
<View style={styles.box}>
<Image source={{uri:this.props.src}} style={styles.img} />
<View style={styles.txt}>
<Text style={styles.title}>{this.props.title}</Text>
<Text style={styles.time}>{this.props.time} | {this.props.id}</Text>
</View>
</View>
</TouchableHighlight>
);
坑点
坑点1:
在TouchableHighlight组件里只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们
坑点2:
虽然组件提供了 underlayColor、 activeOpacity ...等等属性 但是你以为直接用就可以了吗 举个例子 看下面代码
错误代码:
<TouchableHighlight underlayColor='#fff'>
<View>...</View>
</TouchableHighlight>
正确代码:
<TouchableHighlight underlayColor='#fff' onPress={()=>{}}>
<View>...</View>
</TouchableHighlight>
大家应该发现了第二段代码多了 onPress={()=>{}}
这个是个大坑 本以为组件提供的属性 触发事件应该是分装在内部的 然而我们想多了 得自己手动加个事件 才能使得那些属性有效