[React Native] 스타일 적용하기

1. 스타일 적용 기본

 

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

const colorList = [
  { color: '#00974A', val: '00974A' },
  { color: '#2e6067', val: '2e6067' },
  { color: '#a92127', val: 'a92127' },
  { color: '#030364', val: '030364' },
  { color: '#0d6729', val: '0d6729' },
  { color: '#ff290b', val: 'ff290b' },
];

export default function App() {

  return (
    {/* 스타일을 객체에 담아 지정 */}
    <View style={styles.container}>
      <Text style={styles.hello}>Hello</Text>
      <Text>World</Text>
    </View>

    {/* 인라인 스타일 */}
    <View style={{flexDirection: 'column', alignItems: 'center', backgroundColor: "#ff0000"}}>
    <View style={{flexDirection: 'row', backgroundColor: '#ff0000'}}>
    <View style={{flexDirection: 'column'}}>
      <Text style={{backgroundColor: '#ffff00', textAlign: 'center'}}>Hello</Text>
      <Text style={{textAlign: 'right'}}>World</Text>
    </View>

    {/* 자간 넓히기 == letterSpacing */}
    <View>
      <Text style={{letterSpacing: 1.5, fontSize: 20}}>3월 9일은 제20대 대통령 선거일입니다.</Text>
    </View>

    <View>
      <Image
        source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        style={{width: 100, height: 100, resizeMode: 'contain', opacity: 0.5}}
      />
      <Image
        source={require('./src/assets/android.png')}
        style={{width: 300, height: 300, resizeMode: 'contain'}}
      />
    </View>

    <View style={styles.world}>
      <Text>Hello</Text>
      <Text>World</Text>
    </View>


    {/* colorList 배열에 들어있는 색값으로 컬러 지정하기 */}
    <SafeAreaView>
      <View style={{padding: 16}}>
        {colorList.map((item) => (
          <View 
            key={item.color} 
            style={[styles.card, {backgroundColor: item.color}]}
          >
            <Text>{item.val}</Text>
          </View>
        ))}
      </View>
    </SafeAreaView>

  )
}

const styles = StyleSheet.create({
  // 스타일 작성
  container: {
    flex: 1,
    backgroundColor: "#0000ff",
    alignItems: "center",
    justifyContent: "center"
    // marginLeft: "auto",
    // marginRight: "auto",
    // marginTop: "auto",
    // marginBottom: "auto",
    // margin: "auto"
  },
  hello: {
    backgroundColor: "#ff0000",
  },
  world: {
    borderWidth: 1,
    borderColor: 'gray',
    borderBottomLeftRadius: 5,
    borderTopRightRadius: 10
  }

  // 또는
  container: {
    flex: 1
  },
  card: {
    marginVertical: 8,
    height: 96,
    borderWidth: 1,
    borderColor: '#000000',
    borderRadius: 8,
    transform: [  // move, rotation, scale
      { rotateX: '45deg' },
      { rotateZ: '0.785398rad' }
    ]
  }
})

 

2. flex

 

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

// flex: 화면을 화면의 크기 비율로 나누는 것

export default function App() {

  return (
    <View style={style.container}>
      <View style={style.caseOne} />
      <View style={style.caseTwo}>
        <Text>second display area</Text>
      </View>
      <View style={style.caseThree} />
    </View>
  )
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff0000',
    // flexDirection: 'row',
    width: 300,
  },
  caseOne: {
    flex: 1,
    backgroundColor: '#ffff00'
  },
  caseTwo: {
    flex: 1,
    backgroundColor: '#0000ff'
  },
  caseThree: {
    flex: 8,
    backgroundColor: '#00ff00',
    // width: 200, 
    height: 300
  }
})

 

3. 영역을 나누는 방법

 

3-1. 높이와 너비로

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

export const WidthHeight = () => {
    return (
        <View style={style.container}>
            <Text>200 x 100</Text>
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        width: 200,
        height: 100,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#bbb',
    }
})

 

3-2. margin과 padding으로

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

export const MarginPadding = () => {
    
    return(
        <View style={style.container}>
            <Text>제목입니다.</Text>
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        marginHorizontal: '10%',
        padding: 16,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#ff0000',
        backgroundColor: '#ffff00'
    }
})

 

3-3. flex

 

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

export default function Flexbox() {
    return (
        <View style={style.container}>
            <Text style={style.item}>Item 1</Text>
            <Text style={style.item}>Item 2</Text>
            <Text style={style.item}>Item 3</Text>
            <Text style={style.item}>Item 4</Text>
            <Text style={style.item}>Item 5</Text>
            <Text style={style.item}>Item 6</Text>
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: 100,
        height: 100,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#ff0000',
    }
})

 

3-4. 메인에서 적용

import React from "react";
import { StyleSheet, View } from "react-native";
import Flexbox from "./src/components/Flexbox";
import { MarginPadding } from "./src/components/MarginPadding";
import { WidthHeight } from "./src/components/WidthHeight";

const App = () => {

  return (
    <View style={style.container}>
      <WidthHeight />
      <MarginPadding />
      <Flexbox />

      <View style={style.box} />
    </View>
  )
}

const style = StyleSheet.create({
  container: {
    flex: 1
  },
  box: {
    width: 150,
    height: 100,
    backgroundColor: '#ff0000',
    position: 'absolute',  // 우측하단
    right: 16,
    bottom: 16
  }
})

export default App;