React Native 2일차

# 1.0 Layouts with Flexbox in React Native

• React Native의 모든 flexbox는 디폴트가 flexDirection이 column이다. 웹은 디폴트가 row이다. 원하면 바꿀 수 있다.
• 부모 컨테이너는 flex:1값을 항상 가져야한다.
• 자식 컨테이너는 각 flex값 비율에 따라 달라진다.
• 폰마다 사이즈가 다르고 태블릿에서도 사용할 수 있기 때문에 직접width나 height를 설정하는 것보다 flex를 이용하는 것을 추천한다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.yellowView}>
      </View>
      <View style={styles.blueView}>
      </View> 
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { //부모 컨테이너에서 스크린의 모든 공간을 사용한다는 flex: 1을 해줘야 한다.
    flex: 1
  },
  yellowView: { //자식들의 flex값의 비율에따라 달라진다.
    flex: 1,
    backgroundColor: "yellow"
  },
  blueView: {
    flex: 5,
    backgroundColor: "blue"
  }
});

---

#1.1 Loading Screen

• React Native의 style은 css문법과 차이가 있다.

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

export default function Loading(){
    return (
    <View style={styles.container}>
        <Text style={styles.text}>Getting the fucking weather</Text>
    </View>
    );
}

const styles=StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "flex-end",
        paddingHorizontal: 30, // 30px라 쓰려면 "30px"로 해주어야 한다.
        paddingVertical: 100,
        backgroundColor: "#FEF6AA"
    },
    text: {
        color: "#2C2C2C",
        fontSize: 30
    }
});

---

#1.2 Getting the Location

• expo-location API를 설치한다.
• expo install expo-location
• API reference 에서 location관련 함수들을 참고할 수 있다.

import React from 'react';
import Loading from './Loading';
import * as Location from 'expo-location';

export default class extends React.Component {
  getLocation= async () =>{
    const location = await Location.getCurrentPositionAsync();
  }//getCurrentPositionAsync()는 permission을 구해야 한다.
  
  componentDidMount(){
    this.getLocation();
  }

  render (){
    return <Loading/>;
  }
}

---

#1.3 Asking for Permissions

• requestForegroundPermissionsAsync()는 permission을 구하는 함수이다.
• requestForegroundPermissionsAsync()는 error를 반환하므로 try catch문을 사용해야한다.

import React from 'react';
import Loading from './Loading';
import {Alert} from 'react-native';
import * as Location from 'expo-location';

export default class extends React.Component {
  state= {
    isLoading: true
  }

  getLocation= async () =>{
    try {
      await Location.requestForegroundPermissionsAsync();
      const {coords : {latitude, longitude}} = await Location.getCurrentPositionAsync();
      this.setState({isLoading: false});
    } catch (error) {
      Alert.alert("Can't find you","so sad...");
    }//alert사용을 위해 react-native에서 import해와야 한다.
  }
  
  componentDidMount(){
    this.getLocation();
  }

  render (){
    const {isLoading} = this.state;
    return isLoading ? <Loading/> : null;
  }
}

---

#1.4 Getting the Weather

• https://openweathermap.org/ 에서 api를 받기 위해 회원가입을 한다.

• 자신의 api_key를 받아 저장해둔다.
  -해당 사이트의 api reference를 보고 사용법에 따라 작성한다.

• axios의 사용법은 ReactJS 4일차에 있다.

• 여기서 api_key를 적고 github에 push하게되면 api_key가 노출된다.
  - api_key를 숨기기 위해 environment.js를 만들어 안에 api_key를 넣고 .gitignore에 environment.js를 추가해준다.

import React from 'react';
import Loading from './Loading';
import {Alert} from 'react-native';
import * as Location from 'expo-location';
import axios from 'axios';
import environment from './environment';

const API_KEY = environment.REACT_APP_WEATHER_API_KEY;

export default class extends React.Component {
  state= {
    isLoading: true
  }

  getWeather = async (latitude,longitude) =>{
    const {data} = await axios.get(`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}
    `);//http://를 붙이지 않으면 Network error가 발생한다.
    console.log(data);
  }

  getLocation = async () =>{
    try {
      await Location.requestForegroundPermissionsAsync();
      const {coords : {latitude, longitude}} = await Location.getCurrentPositionAsync();
      this.getWeather(latitude,longitude);
      this.setState({isLoading: false});
    } catch (error) {
      Alert.alert("Can't find you","so sad...");
    }
  }
  
  componentDidMount(){
    this.getLocation();
  }

  render (){
    const {isLoading} = this.state;
    return isLoading ? <Loading/> : null;
  }
}