이벤트 발생 시키기

TouchableOpacity를 이용해서 view에다가 이벤트를 발생시켜 보겠다.
임의로 header.js 라는 파일을 새로 만들어서 실습을 해보았다.

import React from 'react';
import { View, Text ,StyleSheet, TouchableOpacity} from 'react-native'; //TouchableOpactity import 해주기 !

const Header=(props)=>(
    <TouchableOpacity
        onPress={()=>alert('hello world')}     //버튼누르면 수행하게되는부분 (alert창 띄위기)
    >
        <View >
            <Text>{props.name}</Text>
        </View>
    </TouchableOpacity>  
)

export default Header;

TouchableOpacity는 여러 property를 가지고있다. 몇 가지를 보겠다.
TouchableWithoutFeedback: 원래는 view를 터치할때 view가 투명해졌다가 이벤트가 발생한다. 얘를 사용하면 view가 투명해지지 않게 해준다.(view에 아무런 변화를 주지 않아서 style을 여기안에 넣으면 안된다.)
onLongPress: 오래누르면 이벤트를 발생시킨다.
onPressIn: 누르자마자 즉각적으로 반응을한다.
onPressOut: 터치했다가 손을 놓았을때 이벤트가 발생한다.

버튼 구현하기

Button태그에는 title이라는 property가 필수로 들어가야한다 . title은 버튼의 제목, 즉 버튼에 새겨지는 글자

임의로 generator.js 라는 파일을 새로 만들어서 실습을 해보았다.

import React from 'react';
import { View, Text ,StyleSheet, Button} from 'react-native'; //마찬가지로 Button을 import 해주기!

const Generator = () =>{
    return(
        <View>
            <Button  //Button 태그
                title="Add Number"   //title의 값은 버튼에 들어가는 값
                onPress={()=>alert('hello world')} 
            />
        </View>
    )
}

export default Generator;

위의 코드를 실행하면 Add Number이라는 내용을 가진 버튼이 생기고, 이 버튼을 누르면 hello world를 포함한 경고창이 뜬다.