[React Native] Touchable Highlight

onPress, underlayColor, onShowUnderlay 등의 값 가질 수 있음

Child 뷰가 클릭될수 있게 돕는 기능으로, underlayColor={“#00000000”}을 주면 클릭할때 반짝거리는 효과도 사라져서 깔끔하고 좋음

 

onPressIn, onPressOut등을 사용하면 버튼을 눌렀을 때, 버튼을 뗐을 때를 인식해서 받아올 수 있음

 

샘플 예시

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    Button,
    Platform,
    TouchableOpacity,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableWithoutFeedback
} from 'react-native';
import {
    createStackNavigator
}from 'react-navigation'



export default class App extends Component {

    constructor(){
        super();
        this.state={
            number:0
        }

    }

    notifySomething(){
        console.log("Clicked"+this.number)
        this.setState({
            number:this.state.number+1
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.container2}>
                    {itemViews}
                </View>
                <View style = {styles.container3}>
                    <TouchableHighlight
                        onPress={()=>this.notifySomething()}
                        underlayColor={'#00000000'}
                        >
                        <View >
                            <Image style={styles.image1}
                                    source={require('../assets/images/miami.jpg')}>
                            </Image>
                        </View>
                    </TouchableHighlight>

                    <Text style={styles.text}>
                        {this.state.number}
                    </Text>
                </View>
            </View>

        );
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        padding: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'gray',
    },
    container2: {
        flex: 1,
        flexDirection: 'row',
        padding: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'yellow',
    },
    container3: {
        flex: 1,
        flexDirection: 'column',
        padding: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'white',
    },
    textContainer:{
        height:80,
        backgroundColor:"cyan",
        marginLeft:5,
        justifyContent:'center',
    },
    text:{
        width:30,
        textAlign:'center',
        backgroundColor:'red',
        borderRadius:50,
        padding:10
    },
    image1:{
        width:30,
        height:60,
        backgroundColor:'red',
        borderRadius:50,
        padding:10
    }

});