React Native---Touchable触摸事件

Touchable触摸交互组件

// ES6写法
export default class App extends Component<Props> {

    // 可以改变的值
    constructor(props) {
        super(props);
        this.state = {
            title: '触摸事件',
            person:'张三'
        };
    }

    // ES5写法
    // static defaultProps = {
    //     age: 18
    // }

    render() {
        return (
            <View ref='topView' style={styles.container}>
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={() => {
                        this.activeEvent('点击')
                    }}
                    onPressIn={() => {
                        this.activeEvent('按下')
                    }}
                    onPressOut={() => {
                        this.activeEvent('抬起')
                    }}
                    onLongPress={() => {
                        this.activeEvent('长按')
                    }}
                >
                    <Text ref='event' style={styles.innerViewStyle}>
                        我是文本但可以点击
                    </Text>
                </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
        });

        // 拿到具体的View
        this.refs.topView
        this.refs.event
    }

}

// 不可改变的值
// ES6的写法
App.defaultProps = {
    age: 18
};

这里的state的用法需要注意