리액트 네이티브로 앱 개발을 하다보면, 아이폰의 경우 notch가 있어 body에 패딩을 주거나 하는 방식으로 처리를 해 줘야 할 때가 생긴다. 또한, 버튼 크기같은 경우도 만들고 나서 앱 빌드를 해보니, 안드로이드와 애플이 다른 것이 아닌가 😮...!
이럴 때 사용할 수 있는게, Platform
과 styled-component의 css
헬퍼 기능이다.
아래는 버튼의 세로 높이를 안드로이드 버전, ios버전 다르도록 설정해 준 예이다.
import {Platform} from 'react-native';
const LoginText = styled.Text`
${Platform.select({
ios: css`
padding: 12px;
`,
})}
color: ${({theme}) => theme.white};
text-align: center;
font-size: ${({theme}) => theme.fontRegular};
font-family: 'NotoSansKR-Bold';
`;
<LoginSignupBtn
id="login"
navigate={() => {
changeScreen('Login');
}}>
<LoginText>로그인</LoginText>
</LoginSignupBtn>
<LoginSignupBtn
id="signup"
navigate={() => {
changeScreen('Signup');
}}>
<SignupText>회원가입</SignupText>
</LoginSignupBtn>
import React from 'react';
import {GestureResponderEvent} from 'react-native';
import styled, {css} from 'styled-components/native';
interface LoginSignupBtnProps {
id: string;
children: JSX.Element;
navigate: (event: GestureResponderEvent) => void;
}
interface ButtonProps {
id: string;
}
const LoginSignupBtn = ({navigate, children, id}: LoginSignupBtnProps) => {
return (
<Button id={id} onPress={navigate}>
{children}
</Button>
);
};
export default LoginSignupBtn;
const LoginButton = css`
background-color: ${({theme}) => theme.primary};
`;
const SignupButton = css`
background-color: ${({theme}) => theme.white};
border: 1px solid ${({theme}) => theme.primary};
`;
const Button = styled.TouchableOpacity<ButtonProps>`
width: 100%;
margin-bottom: 15px;
border-radius: 8px;
${({id}) => (id === 'login' ? LoginButton : SignupButton)}
`;
아래와 같이 하나의 컴포넌트 인데, id에 따라 스타일이 다른 두 개의 버튼을 만들었다!
https://reactnative.dev/docs/platform
https://yumyumlog.tistory.com/244