RN点击事件的使用

来源：互联网发布：怎么找淘宝高仿鞋店铺编辑：程序博客网时间：2024/06/05 13:33

在RN中，相应事件都是通过都是通过TouchableOpacity处理的

技术要点：

1）响应事件方式TouchableOpacity来处理的，
2）状态机
getDefaultProps是用来取值的，取用来不可以改变的值，只想当于get
getInitialState是用来设置值的，相当于set，get

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    TextInput,    TouchableOpacity,    AlertIOS} from 'react-native';var buttonView = React.createClass({    //  不可改变的值    getDefaultProps() {        return {            age:18        }    },    //  可以改变的值    getInitialState() {        return {            title:'不透明触摸',            person:'张三'        }    },    render() {        return (            <View ref = "topView" style={styles.container}>                <TouchableOpacity                activeOpacity={0.5}                onPress={()=>this.activeEvent('点击')}                onPressIn={()=>this.activeEvent('按下')}                onPressOut={()=>this.activeEvent('抬起')}                onLongPress={()=>this.activeEvent('长按')}                >                    <View style={styles.innerViewStyle}>                        <Text ref="event">常用的事件</Text>                    </View>                </TouchableOpacity>                <View>                    <Text>{this.state.title}</Text>                    <Text>{this.state.person}</Text>                    <Text>{this.props.age}</Text>                </View>            </View>        );    },    activeEvent(event) {        //  更新状态机        this.setState( {            title:event,            person:'李四'        })        //  拿到View        this.refs.topView        this.refs.event    }});const  styles = StyleSheet.create({    container :{      flex :1,        justifyContent:'center',        alignItems : 'center',        backgroundColor:'#F5FCFF',    },    innerViewStyle:{        backgroundColor:'red'    }});module.exports = buttonView;

阅读全文

0 0