3.5 通用事件

• 基础组件、ui组件通常包含以下通用事件
• 除了通用事件外，不同组件还会有不同的事件，具体可参考nuke 文档。

  onPress 简单的点击事件

• 仅 TouchableHighlight、Button、Tabbar.Item 具备 onPress

import {createElement, Component} from 'weex-rx';
import {View, Text, TouchableHighlight} from 'nuke';
class myComponent extends Component {
    render(){
        return (
            <TouchableHighlight onPress={()=>{
                console.log('press');
                }}>
                <View>Test</View>
            </TouchableHighlight>
        );
    }
}

onlongpress 长按事件

除了Button等特殊组件外，其他的组件都支持onlongpress事件，如：

import { createElement, Component } from 'weex-rx';
import { mount } from 'nuke-mounter';
import { View, Text, Button, Modal} from 'nuke';

class Demo extends Component {
    render() {
        return (
            <View 
                style={{flex:1,backgroundColor:'navy'}} 
                onlongpress={()=>{Modal.alert('onlongpress')}}>
            </View>
        );
    }

}

mount(<Demo />, 'body');

export default Demo;

onappear/ondisappear 事件

ListView的renderRow方法根节点的组件拥有ondisappear和onappear事件。

• onappear:当一个元素放在滚动的列表里时，能通过这个事件侦听当前的元素是否在滚动的可见区域类。
• ondisappear：当一个元素放在滚动的列表里时，能通过这个事件侦听当前的元素是否在消失在滚动区域里。如：

...
renderItem(item, index) {
    return (
        <TouchableHighlight ondisappear={()=>{Modal.alert('ondisappear')}} 
            onappear={()=>{Modal.alert('onappear')}} style={flex:1} >
            <Text style={app.itemTextList}>{item.title}</Text>
        </TouchableHighlight>
    );
}
...
render() {
    var self = this;
    return (
        <ListView 
            header={listHeader}
            fixHeader={false}
            loadMoreOffset="500"
            style={app.listContainer}
            refresh={listRefresh}
            onloading={self.onloading}
            onrefresh={self.onrefresh}
            renderSeparator={self.separate.bind(self)}
            renderRow={self.renderItem.bind(self)} 
            data={self.state.data}
            stop={self.state.stop}
            loadMore={self.handleLoadMore.bind(self)} 
          />

    )
}