美文网首页
TouchableHighlight之坑

TouchableHighlight之坑

作者: ZKey | 来源:发表于2016-06-22 10:08 被阅读3530次

组件作用

从组件名字我们就不得而知 该组件就是一个高级的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={()=>{}}
这个是个大坑 本以为组件提供的属性 触发事件应该是分装在内部的 然而我们想多了 得自己手动加个事件 才能使得那些属性有效

相关文章

网友评论

      本文标题:TouchableHighlight之坑

      本文链接:https://www.haomeiwen.com/subject/ueagdttx.html