React-native事件处理

最新推荐文章于 2021-11-18 07:30:43 发布

別說你還沒有盡力

最新推荐文章于 2021-11-18 07:30:43 发布

阅读量5.1k

点赞数 1

分类专栏： react-native

本文链接：https://blog.csdn.net/u013147860/article/details/66476253

版权

react-native 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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 (
            <TouchableHighlight onPress={this._onPressButton}>
                <Text>Button</Text>
            </TouchableHighlight>
        );
    }
}
//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 (
            <TouchableNativeFeedback
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableNativeFeedback>
        );
    }
}
//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 (
            <TouchableOpacity
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableOpacity>
        );
    }
}
//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 (
            <TouchableWithoutFeedback
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}
//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(
            <ScrollView horizontal={true}
                        pagingEnabled={true}>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
            </ScrollView>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => IScrolledDownAndWhatHappenedNextShockedMe );

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