[Nomard] React Native - Styles

날씨 앱을 만들어 보면서 style을 익혀보자!

Expo 에서 Location API 를 불러와서 위치 정보를 가져와보자.
그리고 해당 위치 정보를 활용해서, 날씨 API 로부터 16일 간의 기상 예보를 가져와 보자.

style

아래와 같은 style들을 사용해 보았다.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'lightcoral',
    },
    city: {
        flex: 1,
        backgroundColor: 'indianRed',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
    },
    weather: {
        flex: 1,
        backgroundColor: 'indianRed',
        color: 'white',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

flex style을 연습해 보았다.
아직 flex 로 react native 비율 정하는 것이 능숙하진 않지만, 재밌다.

import React from 'react';
import { View, Image, StyleSheet, Platform, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function HomeScreen() {
    return (
        // backgroundColor: indianred
        <View style={styles.container}>
            <StatusBar style="light" />
            <View style={styles.city}>
                <Text style={styles.cityName}>Pangyo</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: 'lightcoral',
    },
    city: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
    },
    cityName: {
        fontSize: 20,
        fontWeight: '600',
    },
    weather: {
        flex: 5,
        color: 'white',
        alignItems: 'center',
    },
    day: {
        flex: 1,
        justifyContent: 'center',
    },
    temp: {
        marginTop: -100,
        fontSize: 150,
        fontWeight: 800,
    },
    description: {
        fontSize: 50,
    },
});