내일배움캠프 4기 React 52일차(native project)

1. Touchableopacity

TouchableOpacity 태그로 disabled 기능 사용,

props 로 title별 칼라 변경.

button 은 쉽지만 디자인이 별로 없음.

<ModalBTN
              onPress={() => setIsOpenSignUpModal(false)}
              title="cancel"
            >
              <BTNText title={"cancel"}>Cancel</BTNText>
            </ModalBTN>
            <ModalBTN
              disabled={!userEmail || !userPassword || !userCheckPassword}
              onPress={onPressSignUp}
              title="Sign Up"
            >
              <BTNText
                disabled={!userEmail || !userPassword || !userCheckPassword}
              >
                Sign Up
              </BTNText>
            </ModalBTN>
            
const ModalBTN = styled.TouchableOpacity`
  flex: 0.4;
  background-color: ${(props) =>
    props.disabled
      ? "background: rgba(229, 0, 21, .5)"
      : props.theme.pointColor && props.title === "cancel"
      ? "#4A4A4A"
      : props.theme.pointColor};
  padding: 12px;
  border-radius: 4px;
`;

const BTNText = styled.Text`
  text-align: center;
  font-size: 16px;
  color: ${(props) =>
    props.disabled
      ? props.theme.pointTextWhite
      : props.theme.pointColor && props.title === "cancel"
      ? props.theme.pointTextWhite
      : props.theme.pointText};
`;