[React-Native] 컴포넌트 스타일링

 

 

 

 

 

💡 인라인(inline) 스타일링

컴포넌트의 태그에 직접 스타일을 적용하는 방식이다.

 

// src/App.js
import React from "react";
import { View, Text } from "react-native";

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text
        style={{
          padding: 10,
          fontSize: 26,
          fontWeight: "600",
          color: "black",
        }}
      >
        Inline Styling - Text
      </Text>
      <Text
        style={{
          padding: 10,
          fontSize: 26,
          fontWeight: "400",
          color: "red",
        }}
      >
        Inline Styling - Error
      </Text>
    </View>
  );
};

export default App;

 

 

 

 

💡 클래스 스타일링

컴포넌트 스타일에 StyleSheet 에 정의된 스타일을 적용하는 방식이다.

 

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Inline Styling - Text</Text>
      <Text style={styles.error}>Inline Styling - Error</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    padding: 10,
    fontSize: 26,
    fontWeight: "600",
    color: "black",
  },
  error: {
    padding: 10,
    fontSize: 26,
    fontWeight: "400",
    color: "red",
  },
});
export default App;

 

 

 

 

💡 스타일 여러 개 적용

스타일을 여러 개 적용함으로써 중복되는 코드를 줄이고 공통된 코드의 관리가 편해진다. 여러 개의 스타일을 적용할 때 주의할 점은 적용하는 스타일의 순서이다.

 

💡 뒤에 오는 스타일이 먼저 오는 스타일을 덮는다.

 

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, { color: "green" }]}>
        Inline Styling - Text
      </Text>
      <Text style={[styles.text, styles.error]}>Inline Styling - Error</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    padding: 10,
    fontSize: 26,
    fontWeight: "600",
    color: "black",
  },
  error: {
    fontWeight: "400",
    color: "red",
  },
});
export default App;

 

 

 

💡 외부 스타일 적용하기

 

// src/App.js

import React from "react";
import { View, Text } from "react-native";
// 외부 스타일 import 해서 사용
import { viewStyles, textStyles } from "./styles";

const App = () => {
  return (
    <View style={viewStyles.container}>
      <Text style={[textStyles.text, { color: "green" }]}>
        Inline Styling - Text
      </Text>
      <Text style={[textStyles.text, textStyles.error]}>
        Inline Styling - Error
      </Text>
    </View>
  );
};
export default App;

 

App 컴포넌트가 아닌 외부 파일에 정의된 스타일 (viewStyles, textStyles) 을 사용하도록 하였다.

 

// src/styles.js

import { StyleSheet } from "react-native";

export const viewStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export const textStyles = StyleSheet.create({
  text: {
    padding: 10,
    fontSize: 26,
    fontWeight: "600",
    color: "black",
  },
  error: {
    fontWeight: "400",
    color: "red",
  },
});

 

 

 

 

💡 Layout, flex 등 스타일 속성 적용하기

 

// src/components/Layout.js

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

export const Header = () => {
  return (
    <View style={[styles.container, styles.header]}>
      <Text style={styles.text}>Header</Text>
    </View>
  );
};

export const Contents = () => {
  return (
    <View style={[styles.container, styles.contents]}>
      <Text style={styles.text}>Contents</Text>
    </View>
  );
};

export const Footer = () => {
  return (
    <View style={[styles.container, styles.footer]}>
      <Text style={styles.text}>Footer</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    height: 80,
  },
  header: {
    backgroundColor: "#f1c40f",
  },
  contents: {
    flex: 1,
    backgroundColor: "#1abc9c",
    height: 640,
  },
  footer: {
    backgroundColor: "#3498db",
  },
  text: {
    fontSize: 26,
  },
});

 

// src/App.js

import React from "react";
import { View, Text } from "react-native";
import { Header, Footer, Contents } from "./components/Layout";
import { viewStyles } from "./styles";

const App = () => {
  return (
    <View style={viewStyles.container}>
      <Header />
      <Contents />
      <Footer />
    </View>
  );
};
export default App;

 

 

 

앱 실행 화면

 

 

 

 

 

💡 Platform 을 이용해서 ios, android 에 그림자 적용하기

 

// src/components/ShadowBox.js

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

export default () => {
  return <View style={styles.shadow}></View>;
};

const styles = StyleSheet.create({
  shadow: {
    backgroundColor: "#fff",
    width: 200,
    height: 200,
    ...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: {
          width: 10,
          height: 10,
        },
        shadowOpacity: 0.5,
        shadowRadius: 10,
      },
      android: {
        elevation: 20,
      },
    }),
  },
});

 

// src/App.js

import React from "react";
import { View, Text } from "react-native";
import { viewStyles } from "./styles";
import ShadowBox from "./components/ShadowBox";

const App = () => {
  return (
    <View style={viewStyles.container}>
      <ShadowBox />
    </View>
  );
};
export default App;

 

 

 

앱 실행 화면

 

 

 

 

 

 

💡 스타일드 컴포넌트

백틱(`)을 사용하여 만든 문자열을 붙이고 그 안에 스타일을 지정하면 된다.

 

// src/components/Button.js

import React from 'react';
import styled from 'styled-components/native';

const ButtonContainer = styled.TouchableOpacity`
  background-color: #9b59b6;
  border-radius: 15px;
  padding: 15px 40px;
  margin: 18px 0px;
  justify-content: center;
`;

const Title = styled.Text`
  font-size: 20px;
  font-weight: 600;
  color: #fff;
`;

const Button = (props) => {
  return (
    <ButtonContainer>
      <Title>{props.title}</Title>
    </ButtonContainer>
  );
};

export default Button;

 

// src/App.js

import React from "react";
import styled from "styled-components/native";
import Button from "./components/Button";

const Container = styled.View`
  flex: 1;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
`;

const App = () => {
  return (
    <Container>
      <Button title="Hanbit" />
      <Button title="React Native" />
    </Container>
  );
};

export default App;

 

 

 

앱 실행 화면

 

 

 

 

 

 

 

💡 스타일드 컴포넌트 - props 전달

App.js 에서 props 로 color 전달 (borderColor)

 

// src/App.js

import React from "react";
import styled from "styled-components/native";
import Button from "./components/Button";
import Input from "./components/Input";

const Container = styled.View`
  flex: 1;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
`;

const App = () => {
  return (
    <Container>
      <Button title="Hanbit" />
      <Button title="React Native" />
      <Input borderColor="#3498db" />
      <Input borderColor="#9b59b6" />
    </Container>
  );
};

export default App;

 

// src/components/Input.js

import React from "react";
import styled from "styled-components/native";

const StyledInput = styled.TextInput.attrs((props) => ({
  placeholder: "Enter a text...",
  placeholderTextColor: props.borderColor,
}))`
  width: 200px;
  height: 60px;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 2px;
  border-color: ${props => props.borderColor};
  font-size: 24px;
`;

const Input = (props) => {
  return <StyledInput borderColor={props.borderColor} />;
};

export default Input;

 

App.js 에서 전달한 borderColor 값을 props 로 받아서 사용

 

 

 

 

앱 실행 화면

 

 

 

 

 

 

 

 

 

 

 

 

 

본 포스팅은 도서 [처음 배우는 리액트 네이티브(한빛미디어, 김범준 지음)] 를 보고 공부하며 기록하였습니다.