[React-Native 기초 강의] TouchEvent

React-Native TouchEvent 생성하기

 

 

 

- 새로운 폴더(src) 아래 새로운 파일(header.js) 생성

import Header from './src/header'

...

<View style={styles.mainView}>
        <Header/>
      </View>

- import는 필수 !

- View 안에 import한 Header를 추가한다.

 

 

 

---

 

 

 

const 함수 = () => 

const Header = () => (
    <View style={styles.header}>
        <Text>This is header</Text>
    </View>
)

1. 위와 같이 const 뒤에 ( )여야지 jsx를 리턴할 수 있다.

2. 만약 const 뒤에 { }라면 리턴되는 js component가 없다는 것!

 

• jsx : javascript xml의 약자 (javascript 확장 문법)

 

 

---

 

class App extends Component {

  state = {
    appName: 'My First App'
  }


...

render() {
    return (
      <View style={styles.mainView}>
        <Header name={this.state.appName}/>
      </View>

- App.js에서 state 안에 있는 appName이라는 변수를 header.js로 name이라는 이름으로 전달한다.

 

const Header = (props) => (
    <View style={styles.header}>
        <Text>{props.name}</Text>
    </View>
)

- header.js에서는 props로 인수를 받아옴!

 

 

---

 

 

View에서의 Touch 이벤트

• TouchOpacity

• TouchableWithoutFeedback : 투명해지지 않고 alert창이 뜸

const Header = (props) => (
    <TouchableOpacity
        style={styles.header}
        onPress={()=>alert('hello world')}
    >
        <View>
            <Text>{props.name}</Text>
        </View>
    </TouchableOpacity>

 

 

 

- onLongPress : 오래 눌러야 이벤트 발생

onLongPress={()=>alert('hello world')}

 

- onPressIn : 누르자마자 반응이 오도록

onPressIn={()=>alert('hello world')}

 

- onPressOut : 터치하고 손을 놓았을 때 반응이 오도록

onPressOut={()=>alert('hello world')}