<react-native> Button, alert, ...

 

 

 

 

alert 메서드

 

 

import React from 'react'
import { Alert, SafeAreaView, Button } from 'react-native'

export default function App() {
  return(
    <SafeAreaView>

      <Button title='Home'
        onPress={() => Alert.alert('home pressed.','message')} />
    </SafeAreaView>
  ) 
}

 

 

 

실행결과

 

 

 

 

 

 

터치블 코어 컴포넌트

 

 

 

import React from 'react'
import { Alert, SafeAreaView, Button } from 'react-native'
import { TouchableOpacity, TouchableHighlight, Text } from 'react-native'

const onPress = () => Alert.alert('home pressed.', 'maessage')

export default function App() {
  return(
    <SafeAreaView>

  <Button title='Home' onPress={onPress} />
  <TouchableOpacity onPress={onPress}>
      <Text> TouchableOpacity </Text>
  </TouchableOpacity>
  <TouchableHighlight onPress={onPress}>
      <Text> ouchableHighlight </Text>
  </TouchableHighlight>
    </SafeAreaView>

  )
}

 

 

실행결과

 

 

여기서는 확인 불가하나

실행해보면 두가지가 효과가 다른다는 것이 확인 가능하다.

 

 

 

 

 

TextInput 코어 컴포넌트

 

 

import React from 'react'
import { Alert, SafeAreaView, Button } from 'react-native'
import { TouchableOpacity, TouchableHighlight, Text } from 'react-native'
import {TextInput} from 'react-native'

const onPress = () => Alert.alert('home pressed.', 'maessage')

export default function App() {
  return(
    <SafeAreaView>

  <Button title='Home' onPress={onPress} />
  <TouchableOpacity onPress={onPress}>
      <Text> TouchableOpacity </Text>
  </TouchableOpacity>
  <TouchableHighlight onPress={onPress}>
      <Text> ouchableHighlight </Text>
  </TouchableHighlight>
  <TextInput
    placeholder="enter yourname"
    onChangeText={(text: string) => console.log(text)}
    onFocus={() => console.log('onFocus')}
    onBlur={() => console.log('onBlur')}
    onEndEditing={() => console.log('onEndEditing')}
    />
    </SafeAreaView>

  )
}

 

 

 

실행결과

 

 

>>>

 

 

...

 

 

log 찍힌거 확인!

 

 

 

 

 

 

 

오늘 할 일 끄읏!~~~~