REACT NATIVE
3. Working WIth Icons (리액트 네이티브로 날씨앱 만들기)
미 냉
2019. 3. 17. 00:19
* vscode 리액트네이티브 세팅!!!
* 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
}
});
대충 이런느낌으로 간단하게 아이콘이 생성된다쓰