QAP项目使用Nuke组件开发。Nuke 是一套基于 Weex 容器 与 Rax 开源渲染引擎的 Hybrid 页面 UI组件体系。 它充分利用了Weex Native渲染红利，具备出色的使用体验。
所有Nuke组件通常包含以下通用事件。除了通用事件外，不同组件还会有不同的事件，具体可参考nuke 文档。
目前仅 TouchableHighlight、Button、Tabbar.Item 具备 onPress，参看如下实例：
'use strict';
import {createElement, Component, render} from 'rax';
import {View, Text, TouchableHighlight, Modal} from 'nuke';
class TestComponent extends Component {
onPress = ()=>{
Modal.alert('press');
}
render(){
return (
<TouchableHighlight onPress={this.onPress} style={{alignItems:'center', padding: '50rem'}}>
<View>点击我试试</View>
</TouchableHighlight>
);
}
}
render(<TestComponent />);
除了Button等特殊组件外，其他的组件都支持onLongPress事件，如：
'use strict';
import {createElement, Component, render} from 'rax';
import {View, Text, TouchableHighlight, Modal} from 'nuke';
class TestComponent extends Component {
longClick = ()=>{
Modal.alert('onlongpress')
}
render(){
return (
<View
style={{flex:1}}
onLongPress={this.longClick}>
<Text>长按屏幕任何试试</Text>
</View>
);
}
}
render(<TestComponent />);
ListView的renderRow方法根节点的组件拥有ondisappear和onappear事件。
...
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)}
/>
)
}
