TouchableHighlight之坑

2016-06-22  本文已影响3530人  ZKey

组件作用

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

上一篇 下一篇

猜你喜欢

热点阅读