[React Native] CSS 적용하는 법

1. StyleSheet의 객체를 만들어 코드를 작성한다.

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

export default function App() {
  return <View style={styles.container}>
    <View style={styles.city}>
      <Text style={styles.cityName}>Seoul</Text>
    </View>
    <View style={styles.weather}>
      <View style={styles.day}>
        <Text style={styles.temp}>27</Text>
        <Text style={styles.description}>Sunny</Text>
      </View>
    </View>
  </View>
};


const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: "tomato",
  },
  city :{
    flex: 1,
    // backgroundColor: 'blue',
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    color: "black",
    fontSize: 68,
    fontWeight: 500
  },
  weather: {
    flex: 3,
  },
  day: {
    flex: 1,
    // justifyContent: "center",
    alignItems:"center",
    // backgroundColor: "teal",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description:{
    fontSize: 60,
  }
})

• StyleSheet 객체를 만들어 사용하면 코드 훨 깔끔
• StyleSheet import 해야함

2. 필요한 props, API를 가져다 쓴다.

reactnative.dev

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

// const { width: SCREEN_WIDTH } = Dimensions.get('window');
const SCREEN_WIDTH = Dimensions.get('window'). width;


export default function App() {
  return <View style={styles.container}>
    <View style={styles.city}>
      <Text style={styles.cityName}>Seoul</Text>
    </View>
    {/* ScrollView에서도 필요한 props 갖다 쓰기 */}
    <ScrollView 
      horizontal 
      pagingEnabled 
      showsHorizontalScrollIndicator = {false}
      style={styles.weather}>
      <View style={styles.day}>
        <Text style={styles.temp}>27</Text>
        <Text style={styles.description}>Sunny</Text>
        </View>
      <View style={styles.day}>
        <Text style={styles.temp}>27</Text>
        <Text style={styles.description}>Sunny</Text>
        </View>
      <View style={styles.day}>
        <Text style={styles.temp}>27</Text>
        <Text style={styles.description}>Sunny</Text>
        </View>
      <View style={styles.day}>
        <Text style={styles.temp}>27</Text>
        <Text style={styles.description}>Sunny</Text>
        </View>
    </ScrollView>
  </View>
};
const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: "tomato",
  },
  city :{
    flex: 1,
    // backgroundColor: 'blue',
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    color: "black",
    fontSize: 68,
    fontWeight: 500
  },
  weather: {
    // flex: 3, #스크롤뷰는 flex를 없애야 화면을 넘어 더 큰 사이즈 구현 가능
  },
  day: {
    // flex: 1, 
    width: SCREEN_WIDTH, 
    alignItems:"center",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description:{
    fontSize: 60,
  }
})

• 기기 화면 크기를 알려주는 API : Dimensions
• view는 스크롤할 수 없다. ScrollView 사용!
• 운영체제에 따라 작동 되지 않은 props도 있을 수 있음