TouchableHighlight之坑

组件作用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容