React-native事件处理

1、onPress：接受一个点击事件的处理函数

'use strict';
import React,{Component} from 'react';
import {AppRegistry,Text,Alert,TouchableHighlight} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            
                Button
            
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

点击Button文字，会调用_onPressButton方法，然后弹出提示框。

效果图：

TouchableHighlight：此组件的背景会在用户手指按下时变暗

Button字的背景变暗。

TouchableNativeFeedback：它会在用户手指按下时形成类似墨水涟漪的视觉效果

效果：

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableNativeFeedback} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            
                
                    Button
                
            
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

TouchableOpacity：会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableOpacity} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            
                
                    Button
                
            
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

TouchableWithoutFeedback：处理点击事件的同时不显示任何视觉反馈

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableWithoutFeedback} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            
                
                    Button
                
            
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

2、ScrollView可以查看之前的一篇博文：http://blog.csdn.net/u013147860/article/details/65972786

pagingEnabled={true}和horizontal={true}一起使用，可以实现分页效果。pagingEnabled默认是false.

效果：

'use strict';
import React,{Component} from 'react';
import {AppRegistry,ScrollView,Text,Image} from 'react-native';
class IScrolledDownAndWhatHappenedNextShockedMe  extends Component{

    render(){
        return(
            
                Scroll me plz
                
                
                
                
                
                Scroll me plz
                
                
                
                
                
                Scroll me plz
                
                
                
                
                
                Scroll me plz
                
                
                
                
                
            
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => IScrolledDownAndWhatHappenedNextShockedMe );

ViewPagerAndroid：水平方向的滑动还可以使用Android上的ViewPagerAndroid 组件。