Expo - Button 생성

Expo - Button

TouchableOpacity

React-Native에서 Button 컴포넌트는
안드로이드와 ios에서 다르게 보이기 때문에 TouchableOpacity을 사용한다.

TouchableOpacity import 해주기

import { TouchableOpacity } from "react-native";

View로 감싸고 있던 컴포넌트를 TouchableOpacity로 감싸주기

나의 작성 코드

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

const Button = ({ onPress }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} activeOpacity={0.4} onPress={onPress}>
        <Text style={styles.buttonText}>Button</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Button;

---

TouchableOpacity 태그 안에 보면,
activeOpacity가 보일 것이다.

activeOpacity는 버튼을 눌렀을 때 반짝이는 정도를 나타낸다.

• 숫자가 낮을수록 더욱 더 반짝인다.
• activeOpacity={“none”} 하면 반짝임이 없어진다.

---

Button CSS

const styles = StyleSheet.create({
  container: {
    flex: 0.5,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    width: 80,
    height: 40,
    backgroundColor: "#ad9d9d",
    borderRadius: 4.5,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonText: {
    fontSize: 17,
    fontWeight: "400",
    color: "#fff",
  },
});