코드미뇽
미뇽의 잡다 코딩 공부
코드미뇽
전체 방문자
오늘
어제
  • 분류 전체보기
    • 스파르타코딩클럽
    • React-Native
    • 개발일기
    • 사회

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 스파르톤
  • 스파르타코딩클럽
  • 공스타그램
  • 나만의꿀팁
  • 스파르타코딩
  • #스파르타코딩클럽 #스파르톤 #힙한취미 #코딩

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
코드미뇽

미뇽의 잡다 코딩 공부

[리액트]버튼
React-Native

[리액트]버튼

2021. 7. 11. 00:21
import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {

  const customAlert = () => {
    Alert.alert("얼럿입니다!")
  }

  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={customAlert}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

const customAlert = () => {
    Alert.alert("얼럿입니다!")
  }

이렇게도 표현가능하다. 

 onPress={customAlert}

 

'React-Native' 카테고리의 다른 글

[리액트]이미지 꽉 채우기 cover  (0) 2021.07.11
[리액트]이미지이용하여 반복채우기 [리액트네이티브]  (0) 2021.07.11
[리액트]터치 (TouchableOpacity)  (0) 2021.07.11
[리액트]스크롤뷰 app.js  (0) 2021.07.11
expo 시작  (0) 2021.07.10
    'React-Native' 카테고리의 다른 글
    • [리액트]이미지이용하여 반복채우기 [리액트네이티브]
    • [리액트]터치 (TouchableOpacity)
    • [리액트]스크롤뷰 app.js
    • expo 시작
    코드미뇽
    코드미뇽

    티스토리툴바