ReactNative Touchable 组件

来源：互联网发布：简明python mobi 编辑：程序博客网时间：2024/05/18 11:04
ReactNative Touchable 组件。
import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    TextInput,    Image,} from 'react-native';/**6、Touchcable 系列组件 TouchcableOpacity 透明触摸，点击时，组件会出现透明过度效果 TouchcableHighlight 高亮触摸，点击时，组件会出现高亮效果 TouchcableWithoutFeeback 五反馈性触摸，点击时，组件无视觉变化 需要导入组件 */let RnDemo = 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.button} onPress={this.clickBtn}>                    <Text style={styles.search}>搜索</Text>                </TouchableOpacity>            </View>        );    }});let 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,        },        button: {            width: 55,            height: 45,            marginLeft: 5,            marginRight: 5,            backgroundColor: "#23BEFF",            justifyContent: "center",            alignItems: "center",        },        search: {            color: "#FFF",            fontSize: 15,            fontWeight: 'bold'        },    });
阅读全文
1 0