rn에서 styled-component 사용하기

설치

---

npm i styled-components

1. 스타일 적용하기 - Tagged Template Literals

---

import styled from 'styled-components/native';

const 컴포넌트이름 = styled.컴포넌트`
	스타일 코드
`
// 실제 코드
const Container = styled.View`
  flex: 1;
  background-color: red;
  align-items: center;
  justify-content: center;
`;

2. 스타일 적용하기 - 스타일 재사용(CSS)

---

import {css} from 'styled-components/native';

const 스타일이름 = css`
	스타일코드
`

const 컴포넌트이름 = styled.컴포넌트`
	${스타일이름}
	스타일 코드
`

//실제 코드
import styled, {css} from 'styled-components/native';

const cssText = css`
  font-size: 20px;
  font-weight: bold;
`;

const StyledText = styled.Text`
  ${cssText}
  color: blue;
`;

3. 스타일 적용하기 - 스타일 재사용(일반적인 상속)

---

import styled from 'styled-components/native';

const StyledText = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: blue;
`;

*괄호안에 동일하게 사용될 스타일 컴포넌트를 넣어줍니다.*
const ErrorText = styled(StyledText)`
  color: yellow;
`;

활용하기

---

1. props

• styled-components 를 사용하면 props를 이용하여 style을 변경할 수 있습니다.

const StyledText = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: ${props => (props.name === 'red' ? 'black' : 'yellow')};
`;

const App = () => {
	const name = 'red';
	<StyledText name={name}>{name}</StyledText>
}

2.attrs

• 컴포넌트 스타일 외에도 다양한 스타일을 변경할 수 있습니다.(예 : 해당 컴포넌트의 속성)
• styld.컴포넌트.attrs({ 속성 설정 })스타일 코드``

*일반적인 예시*
const App = () => {
	const name = 'red';
	<StyledInput placeholder='입력해주세요' placeholderTextColor='#fff' />
}

*styled-component를 사용한 예시*

const StyledInput = styled.TextInput.attrs({
	placeholder:'입력해주세요',
	placeholderTextColor:'#fff' 
})`
	border-width: 200px;
`

const App = () => {
	const name = 'red';
	<StyledInput/>
}

3.ThemeProvider

• “미리 정의된 값들을 지정해서 해당 값을 사용할 수 있게 해줍니다.”

import styled,{ThemeProvider} from 'styled-components/native';

*ThemeProvier를 사용한 예시*

const StyledText = styled.Text`
	font-size: 100px;
	color: ${props => props.theme.textColor};
	background0color: ${({theme}) => theme.bg}
`

const App = () => {
	const theme = {textColor: '#009600',bg: '#e3e3e3'};
	<ThemeProvider>
		<StyledText/>
	</<ThemeProvider>
}

실제로 사용해보기

---

• App.js

    import styled, {css, ThemeProvider} from 'styled-components/native';
    import Input from './src/components/Input';
      
    const Container = styled.View`
      flex: 1;
      background-color: ${({theme}) => theme.bgColor};
      align-items: center;
      justify-content: center;
    `;
      
    const lightTheme = {
      inputColor: '#111111',
      inputBorder: '#111111',
      bgColor: '#e3e3e3',
    };
      
    const darkTheme = {
      inputColor: '#e3e3e3',
      inputBorder: '#e3e3e3',
      bgColor: '#111111',
    };
      
    const App = () => {
      const [toggle, setToggle] = useState(true);
      return (
        <ThemeProvider theme={toggle ? lightTheme : darkTheme}>
          <Container>
            <StatusBar style="auto" />
            <Switch value={toggle} onValueChange={prev => setToggle(prev)} />
            <Input placeholder="zza" />
          </Container>
        </ThemeProvider>
      );
    };
  

• Input.js

    //   prop를 전달받기에 축약형으로 text로 전달
    const StyledInput = styled.TextInput.attrs(({placeholder}) => ({
      placeholder: placeholder || '입력해주세요',
      placeholderColor: '#111111',
    }))`
      padding: 20px;
      font-size: 20px;
      border: 1px solid ${({text}) => (text ? 'blue' : 'red')};
    `;
      
    const Input = ({placeholder}) => {
      const [text, setText] = useState('');
      return (
        <StyledInput
          onChangeText={e => setText(e)}
          text={text}
          placeholder={placeholder}
        />
      );
    };