react-native에서 TouchableOpacity를 사용하는 이유

2020. 2. 2. 09:53·React Native

리액트네이티브에서 Button컴포넌트를 사용하지 않고 TouchableOpacity를 사용하는 이유

 - Button 컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있다

import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

const Button = ({ onPress }) => {
  return (
    <TouchableOpacity activeOpacity={0.8} style={styles.button} onPress={onPress}>
      <Text style={styles.text}>버튼</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 60,
    height: 60,
    backgroundColor: "#fe5746",
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    color: "#fff"
  }
});

export default Button;

activeOpacity : 버튼을 눌렀을 때에 반짝이는 정도

반응형
저작자표시 비영리 변경금지 (새창열림)

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

react native window 개발 환경 세팅  (0) 2020.05.26
expo 배포하기  (0) 2020.03.18
wsl에서 expo 사용시 인터넷이 멈추는 현상  (1) 2020.02.05
react-native 플레이스토어 업데이트 버전코드  (0) 2020.02.05
'React Native' 카테고리의 다른 글
  • react native window 개발 환경 세팅
  • expo 배포하기
  • wsl에서 expo 사용시 인터넷이 멈추는 현상
  • react-native 플레이스토어 업데이트 버전코드
vitnal
vitnal
4년차 프론트엔드 개발자 입니다. 이 블로그는 기록하고 싶은 내용을 저장하기 위해 사용하고 있습니다. 정제되지 않은 내용이 있을 수 있는 점 양해 부탁드립니다.
  • vitnal
    vitnal 아카이브
    vitnal
  • 전체
    오늘
    어제
    • 분류 전체보기 (155) N
      • What I Read (3) N
      • AI (5)
      • WEB (8)
      • React (21)
      • Nextjs (17)
      • JavaScript (16)
      • React Native (5)
      • Git (15)
      • Dev Tools (23)
      • Deploy (12)
      • Tech Memo (22)
      • Retrospect (7)
  • 반응형
  • hELLO· Designed By정상우.v4.10.5
vitnal
react-native에서 TouchableOpacity를 사용하는 이유
상단으로

티스토리툴바