[recap] 커스텀 버튼 생성 및 플랫폼 별 스타일링

[One-HyeWon]

무엇을 알게 되었나요?

• S4. 컴포넌트, 레이아웃 & 스타일링 자세히 살펴보기 - 미니 게임 앱 구축하기

커스텀 버튼 생성하기

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

// 객체 구조 분해문
function PrimaryButton({children}) {
  return (
    <View>
      <Text>{children}</Text>
    </View>
  );
}

export default PrimaryButton;

///////////

// props 활용
function PrimaryButton(props) {
  return (
    <View>
      <Text>{props.children}</Text>
    </View>
  );
}

export default PrimaryButton;

ios & Android 스타일링

const styles = StyleSheet.create({
  inputContainer: {
    padding: 16,
    marginTop: 100,
    backgroundColor: "#72063c",
    marginHorizontal: 24,
    borderRadius: 8,
    elevation: 4, //androiod only
    shadowColor: "black", //ios only
    shadowOffset: { width: 0, height: 2 }, //ios only, 그림자의 치우침
    shadowRadius: 6, //ios only, 그림자가 어느정도 깊게
    shadowOpacity: 0.26, //ios only, 그림자 투명도
  },
});

Text 필드 구성

      <TextInput
        style={styles.numberInput}
        maxLength={2}
        keyboardType="number-pad" // 키보드 형식 지정
        autoCorrect={false} // 자동 수정 방지
        autoCapitalize="none" // 문자 입력시 자동 대문자 변경 방지
      />

커스텀 버튼

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

function PrimaryButton({ children }) {
  function pressHandler() {
    console.log("Button pressed");
  }

  return (
    <View style={styles.buttonOuterContainer}>
      <Pressable
      // ios 의 ripple (물결효과)를 위한 style 프로퍼티
        style={({ pressed }) =>
          pressed
          // pressed가 true이면 2개의 스타일 객체를 적용 할 수 있음
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
        onPress={pressHandler}
        // androiod의 ripple 효과
        androiod_ripple={{ color: "#640233" }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>
  );
}

export default PrimaryButton;

const styles = StyleSheet.create({
  buttonOuterContainer: {
    borderRadius: 28,
    margin: 4,
    overflow: "hidden",
  },
  buttonInnerContainer: {
    backgroundColor: "#f7287b",
    paddingVertical: 8,
    paddingHorizontal: 16,
    elevation: 2,
  },
  buttonText: {
    color: "white",
    textAlign: "center",
  },
  pressed: {
    opacity: 0.75,
  },
});

어려운 내용이 있었다면 무엇이고, 이를 어떻게 해결하였나요?

.

어떤 자료를 참고하였나요?

.