React Native（第二节点击事件）

来源：互联网发布：淘宝华硕官方旗舰店编辑：程序博客网时间：2024/05/16 14:40

React Native的提供了四种点击事件

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback

其实可以将点击事件当成一个特殊的UI组件，将这个特殊的UI组件包在UI组件的外面，就可以使指定的UI组件有了点击响应能力。

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

1 0