TouchableOpacity组件(绑定事件)

来源:互联网 发布:雅米网络兼职接不到单 编辑:程序博客网 时间:2024/05/16 05:40

这里写图片描述


代码实现(index.ios.js)

//TouchableOpacity组件(绑定事件)import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,   TouchableOpacity} from 'react-native';/*    React Native 提供了3个组件用于给其他没有触摸事件的组件绑定触摸事件    TouchableOpacity 透明触摸,点击时,组件会出现透明过度效果    TouchableHighlight  高亮触摸,点击时.组件会出现高亮效果    TouchableWithoutFeedback 无反馈性触摸,点击时,组件无视觉变化    需要导入组件*/// 组件var HelloReactNative = React.createClass({    clickBtn:function () {        alert("点击搜索");    },    render:function () {        return(            <View style={styles.container}>                <View style={styles.flex}>                    <View style={styles.input}>                    </View>                </View>                <TouchableOpacity style={styles.btn} onPress={this.clickBtn}>                    <Text style={styles.search}>搜索</Text>                </TouchableOpacity>            </View>        );    }});//样式var styles = StyleSheet.create({    container:{        flexDirection:"row",        height:45,        marginTop:25    },    flex:{        flex:1    },    input:{        height:45,        borderWidth:1,        marginLeft:5,        paddingLeft:5,        borderColor:"#CCC",        borderRadius:4    },    btn:{        width:55,        marginLeft:5,        marginRight:5,        backgroundColor:"#2873ff",        height:45,        justifyContent:"center",        alignItems:"center"    },    search:{        color:"#FFF",        fontSize:15,        fontWeight:"bold"    }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);