React Native 常用组件之 Touchable

TouchableOpacity:不透明触摸

该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。

  • 常用属性:
  • activeOpacity (number):当用户触摸的时候,组件的透明度;
  • 常用方法:
  • onPress:点击;
  • onPressIn:按下;
  • onPressOut:抬起;
  • onLongPress:长按;
//ES5写法
var main = React.createClass({
    getInitialState(){
        return{
            title:'不透明触摸'
        }
    },
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity 
                    activeOpacity={0.5}
                    onPress={()=>this.activeEvent('点击')}
                    onPressIn={()=>this.activeEvent('按下')}
                    onPressOut={()=>this.activeEvent('抬起')}
                    onLongPress={()=>this.activeEvent('长按')}
                    >
                    <View style={styles.innerViewStyle}>
                        <Text style={{color:'white'}}>点击事件</Text>
                    </View>
                </TouchableOpacity>
                <View>
                    <Text>{this.state.title}</Text>
                </View>
            </View>
        );
     },

     activeEvent(event){
       this.setState({
           title:event
       })
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容