[React/React-Native] StyleSheet, props, setState, expo/vector-icons/LinearGradient, StatusBar

View, Text, StyleSheet 컴포넌트 from react-native
expo 라이브러리에 있는
expo/vector-icons, 
StatusBar, 
LinearGradient

 

 

날씨 정보를 Weather 컴포넌트에 넘겨주는 법

1. data.main.temp를 App.js 에서 Weather.js에 넘겨야한다.

2. 그러기 위해서는 상위 App.js에서 불러오는데이터를  state에 저장한다.

3. setState는 useState와 같은 역할을 한다. 회사에서는 hooks를 사용하니깐 class 형으로 개발하는 해당 프로젝트에서 몰랐던 부분임.

 

 

setState는 어떤 일을 하나요?

setState()는 컴포넌트의 state객체에 대한 업데이트 실행

getWeather class내부에서 아래와 같이 선언하고

this.setState({ isLoading: false, temp: data.main.temp });

render() 시킬 때 this.state로 state값 대입

  render() {
    const { isLoading, temp } = this.state;
    return isLoading ? <Loading /> : <Weather temp={Math.round(temp)} />;
  }

 

StyleSheet 컴포넌트

아래 코드를 사용하여 여러 style을 한 곳에 담아서 씀

StyleSheet.create

 

상하좌우 가운데 정렬

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

 

styles 선언 후에는 적용할 컴포넌트에 붙이기

export default function Weather({ temp }) {
    return (
        <View style={styles.container}>
            <Text >{temp}</Text>
        </View >
    );
}

 

expo/vector-icons

이미 엑스포 설치할 때 설치 돼있음

그래서 import만 해서 사용하면 됨

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
// import는 MaterialCommunityIcons등 많음. 원하는 것 import 해오면 됨
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  );
}

보이는 결과값:

 

Icons - Expo Documentation

 

 

LinearGradient

 

expo 라이브러리로 npm으로 설치할 필요 있음

LinearGradient가 <View> <View/>와 같은 역할을 함 => 굳이 <View>를 쓰지 않아도 된다는 말

 

import { LinearGradient } from "expo-linear-gradient";


<LinearGradient
  colors={weatherOptions[condition].gradient}
  style={styles.container}
>
</LinearGradient>

 

uiGradients - Beautiful colored gradients

 

Statusbar

barStyle prop으로 색 변경 가능

 

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

<StatusBar barStyle="light-content" />

 

 

2개의 스타일 함께 사용하기

 <View style={{ ...styles.halfContainer, ...styles.textContainer }}>
        <Text style={styles.title}>{weatherOptions[condition].title}</Text>
        <Text style={styles.subtitle}>
          {weatherOptions[condition].subtitle}
        </Text>
 </View>

 

 

그 외

 

Math.round() 올림

switch-case 문이 아닌 객체, 객체 배열에서 값을 가져올 수 있다.