3. Working WIth Icons (리액트 네이티브로 날씨앱 만들기)

* vscode 리액트네이티브 세팅!!!

 

https://www.vobour.com/vscode-%EC%B6%94%EC%B2%9C-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98%EA%B3%BC-%EC%84%B8%ED%8C%85-vscode-recommended-e

 

* vs sync로 동기화도 가능

 

expo는 vector icon 이라는 ion icon 아이콘 패키지가 있다.

https://expo.github.io/vector-icons/

 

여기서 사용하고 싶은 아이콘을 찾아서 name에 입력하면 사용하고싶은 아이콘을 사용 할 수 있다!!!!!

 

import {Ionicons} from "@expo/vector-icons";

 

해서

 

<Ionicons

color = "white"

size ={144}

name = "ios-rainy"

/>

 

이런식으로 아이콘색, 모양을 가져와서 쉽게 사용 할 수 있다.

 

 

 

import React, { Component } from "react";

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

import { LinearGradient } from "expo";

import {Ionicons} from "@expo/vector-icons";

//import {FontAwesome} from "@expo/vector-icons";

export default class Weather extends Component{

render() {

return (

<LinearGradient

colors={["#00C6F8", "#005BEA", "red"]}

style={styles.container}

>

<View style={styles.upper}>

<Ionicons

color = "white"

size ={144}

name = "ios-rainy"

/>

<Text style = {styles.temp}> 35º </Text>

</View>

<View style={styles.lower}>

<Text style = {styles.title}> 비옴 </Text>

<Text style = {styles.subtitle}> 밖을보세요</Text>

</View>

</LinearGradient>

);

}

//LinearGradient: 색, 스타일

// 색상은 from to로 설정

}

const styles = StyleSheet.create({

container: {

flex: 1

},

upper: {

flex: 1,

alignItems: "center",

justifyContent:"center",

backgroundColor: "transparent"

},

temp: {

fontSize: 48,

backgroundColor: "transparent",

color: "white",

marginTop: 10

},

lower: {

flex: 1,

alignItems: "flex-start",

justifyContent: "flex-end",

paddingLeft: 25

},

title: {

fontSize: 38,

backgroundColor: "transparent",

color: "white",

marginBottom: 10,

fontWeight : "300"

},

subtitle: {

fontSize: 24,

backgroundColor: "transparent",

color: "white",

marginBottom : 24

}

});

 

대충 이런느낌으로 간단하게 아이콘이 생성된다쓰