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);
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 );