React Native的提供了四种点击事件
- TouchableHighlight
- TouchableNativeFeedback
- TouchableOpacity
- TouchableWithoutFeedback
TouchableHighlight
这是点击透明度发生变化
activeOpacity={0.7}
按下后背景颜色
underlayColor={'red'}
TouchableNativeFeedback
Android设备原生控件
TouchableOpacity
点击背景透明度变化activeOpacity={0.7}
TouchableWithoutFeedback
没有任何反馈效果的
React按钮的事件处理 按钮关联了四个事件:
1. 按钮按下事件:onPress - 按下并松开按钮,会触发该事件(相当于PC的onclick) 2. 按钮长按事件:onLongPress - 按住按钮不松开,会触发该事件(长按事件) 3. 按钮按下事件:onPressIn - 按下按钮不松开,会触发该事件(相当于PC的onkeydown) 4. 按钮松开事件:onPressOut - 按下按钮后松开,或按下按钮后移动手指到按钮区域外,都会触发该事件(相当于PC的onkeyup)
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var Button = require('react-native-button')
var {
AppRegistry,
StyleSheet,
ToastAndroid,
Text,
View,
TouchableWithoutFeedback,
TouchableHighlight,
TouchableNativeFeedback,
Image,
} = React;
var TestReactNative = React.createClass({
getInitialState: function()
{
ToastAndroid.show('哈哈哈哈哈', ToastAndroid.SHORT);
return null;
},
textOnclick:function()
{
ToastAndroid.show('点击了', ToastAndroid.SHORT);
},
imageOnclick:function()
{
ToastAndroid.show('图片被点击了', ToastAndroid.SHORT);
},
buttonOnclick:function()
{
ToastAndroid.show('Button被点击了', ToastAndroid.SHORT);
},
//绘制视图
render: function() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback
onPress={() => this.textOnclick()}>
<View>
<Text style={styles.welcome}>
Welcome
</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => this.imageOnclick()}>
<Image source={{uri: 'http://c1.mifile.cn/f/i/15/item/buyphone/mi5-yin.jpg'}} style={styles.imageStyle}>
</Image>
</TouchableWithoutFeedback>
<Button
containerStyle={{padding:10, height: 45, overflow:'hidden', borderRadius:4, backgroundColor:'white', marginTop: 10}}
style={{fontSize: 20, color: 'green'}}
styleDisable={{color: 'red'}}
onPress={this.buttonOnclick}>
这是一个按钮
</Button>
<TouchableHighlight
style={{marginTop:20}}
//按下后背景透明度变化
activeOpacity={0.7}
//按下后背景颜色
underlayColor={'red'}
onPress={() => ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
<Text
style={{fontSize:23, color:'blue', backgroundColor:'white'}}
>
这是一个文本(测试TouchableHighlight)
</Text>
</TouchableHighlight>
<TouchableNativeFeedback
background={TouchableNativeFeedback.SelectableBackground()}
onPress={() => ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
<View
style={{marginTop:10}}>
<Text
style={{fontSize:23, color:'blue', backgroundColor:'white'}}
>
TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ff3000',
// flexDirection: 'column',
},
welcome: {
// flex: 1,
width:200,
//字体大小
fontSize: 20,
textAlign: 'center',
// margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
imageStyle:{
width: 200,
height: 200,
}
});
AppRegistry.registerComponent('TestReactNative', () => TestReactNative);