TouchableOpacity元件(綁定事件)

代碼實作(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:,
        marginTop:
    },
    flex:{
        flex:
    },
    input:{
        height:,
        borderWidth:,
        marginLeft:,
        paddingLeft:,
        borderColor:"#CCC",
        borderRadius:
    },
    btn:{
        width:,
        marginLeft:,
        marginRight:,
        backgroundColor:"#2873ff",
        height:,
        justifyContent:"center",
        alignItems:"center"
    },
    search:{
        color:"#FFF",
        fontSize:,
        fontWeight:"bold"
    }
});


AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);