[React Native/Inflearn] React 첫 입문 & React Native로 날씨앱 만들기

 

 

https://facebook.github.io/react-native/docs/getting-started

React Native · A framework for building native apps using React

 

아직은 window라 이렇게 설정.

Expo CLI Quickstart는 간결한데 안되는게 많음

결국은 React Native CLI Quickstart를 써야함

 

아래로 쭉쭉 따라하면 됨

 

안드로이드 에뮬레이터에서 설정 창 띄우기 

adb shell input keyevent 82

 

[Inflearn]

Expo - XDE 지원 중단 -> CLI 설치

https://codinghub.tistory.com/48

 

Expo Xde 지원 중단에 따른 Expo dev tool(Expo cli) 설치 및 실행 방법

참고한 것.

 

근데 이거 init 할 때 엔터 두 번정도 누르면 (초반에) 이름 적는게 있어서 그거 키보드로 치고 그다음에 expo project 설치해야함,,,

 

 

So, 

1. react-native run-android

2. expo start

 

snack expo 브라우저에서 바로 테스트 가능. code pen같은 것. 협업 가능

 

리액트 네이티브만을 위한 특정 컴포넌트만 return 가능. 웹 브라우저랑 다르다.

like view, text

 

 

flex 연습해보기 App.js

 

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'space-around',
    // justifyContent: 'flex-end',
    alignItems: 'flex-end',
    flexDirection: 'row', // default : column,
    flexWrap: 'wrap'
  },

  redView: {
    height: 50,
    width: 50,
    backgroundColor: 'red'
    // alignSelf: 'flex-start'
  },

  yellowView: {
    height: 50,
    width: 50,
    backgroundColor: 'yellow'
    // alignSelf: 'center'

  }
});

 

icon 얇게 하는 법!! 그냥 텍스트도 잘 안먹어,,,

 

일단 icon까지 적용했을 때 

App.js

import React, {Component} from 'react';
import { ActivityIndicator, AppRegistry, StyleSheet, Text, View, StatusBar } from 'react-native';
import Weather from "./Weather"

export default class App extends Component {
  state = {
    // 날씨 정보 받았는지 알려주는 indicator 필요
    isLoaded: true
  }

  render() {
    const { isLoaded } = this.state;
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} barStyle="dark-content" />
        { isLoaded ? (<Weather />) : (
          <View style={styles.loading} >
            <Text style={styles.loadingText} >Getting the Fucking Weather</Text>
          </View> 
        )}
      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
    // justifyContent: 'space-around',
    // justifyContent: 'flex-end',
    // alignItems: 'flex-end',
    // flexDirection: 'row', // default : column,
    // flexWrap: 'wrap'
  },

  loading: {
    flex: 1,
    backgroundColor: "#FDF6AA",
    justifyContent: 'flex-end',
    paddingLeft:25,
  },

  loadingText: {
    fontSize: 38,
    marginBottom: 100
  }
});

 

 

Weather.js

import React, {Component} from "react";
import { StyleSheet, Text, View } from "react-native";
import { LinearGradient } from "expo";
import { Ionicons } from "@expo/vector-icons";
// FontAwesome 도 import 가능

export default class Weather extends Component {
    // LinearGradient : view인데 배경색이 gradient인 것
    // 색상(from-to)과 스타일(평범한 view) 속성이 필요
    render() {
        return (
            <LinearGradient 
                colors={["#00C6FB", "#005BEA"]}
                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} >Raining like a MF</Text>
                    <Text style={styles.subTitle}>For more info look outside</Text>
                </View>


            </LinearGradient>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

    upper: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "transparent", // 이걸 해야 아이콘이 보임 그래야 child인 icon이 보이는거.
    },

    lower: {
        flex: 1,
        alignItems: "flex-start",
        justifyContent: "flex-end",
        paddingLeft: 25
    },

    temp: {
        fontSize: 48,
        backgroundColor: "transparent",
        marginBottom: 24,
        marginTop: 10,
        color: "white"
    },

    title: {
        fontSize: 38,
        backgroundColor: "transparent",
        marginBottom: 10,
        color: "white",
        fontWeight: "normal"
    },

    subTitle: {
        fontSize: 24,
        backgroundColor: "transparent",
        marginBottom: 24,
        color: "white"
    }
});

 

 

*******************Expo 이용해서 Android 에뮬레이터에서 돌리기!*******************

cmd

C:\Users\user\Desktop\dev\expo\myNewProject>expo start
Starting project at C:\Users\user\Desktop\dev\expo\myNewProject
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Warning: This project contains unoptimized assets. Please run `expo optimize` in your project directory.
Starting Metro Bundler on port 19001.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.

  exp://192.168.200.167:19000

그러면 창이 하나 뜸.

 

안드로이드 에뮬레이터 띄워놓기 하기!

myNewProject에는 이렇게 있음

 

 

====error====

LAN으로 선택하니 안됐다,, Local로 해야 expo가 제대로 실행됐다

LAN은 네트워크가 같아야하는,,? 그런 문제인 것 같다,,,

 

 

=====Getting Geolocation====

navigator이용해서 현재 위치 가져오기 가능

getCurrentPosition : '이게 성공적이라면 한 개의 function을 실행한다'

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position)
})

f12누르고 console에 이거 입력하면 위치 진짜 나옴

react-native에서도 동일!

 

 

[Getting the Weather]

The Best Api is "Open Weather Api"

https://openweathermap.org/api

Weather API - OpenWeatherMap

로그인하면 아래 화면 뜸

API_KEY 클릭

그리고 App.js에 

const API_KEY = "복분"; 이렇게 붙여넣기

 

docs에서

우리는 이걸 사용할거임.

 

이제 새로운 함수 하나 만들거임

 

https://openweathermap.org/weather-conditions

Weather Conditions - OpenWeatherMap

weather condition check

 

 

Debug JS Remotely - f12 - vscode 터미널이나 expo에만 볼 수 있던 console을 크롬에서 볼 수 있다. f12 console에서!

다시 흔들어서 debug 스탑하면 됨.

 

App.js

import React, {Component} from 'react';
import { ActivityIndicator, AppRegistry, StyleSheet, Text, View, StatusBar } from 'react-native';
import Weather from "./Weather"

const API_KEY = "b86c474546c60f7c146da98180738950";

export default class App extends Component {
  state = {
    // 날씨 정보 받았는지 알려주는 indicator 필요
    // 위치 정보가 확인되면 isLoaded = true
    isLoaded: false,
    error: null,
    temp: null,
    name: null
  };

  // react-native는 navigator라는 오브젝트가 있다 like google chrome's navigator
  // 위치 정보 확인 후 isLoaded 정보 변경
  // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다.
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this._getWeather(position.coords.latitude, position.coords.longitude);
        
      // console.log(position); 
      // 이거 하면 위치 허용 메시지 뜬다. 메시지 내용 우리가 변경 가능
        // this.setState({
        //   isLoaded: true, // 위치 정보 확인되면 true로 변경
        //   error: "Someting is wrong" //=? error라는 state가 설정됨

        // });
      },

      error => {
        this.setState({
          error: error
        })
      }
    );
  }

  _getWeather= (lat, lon) => {
    // 여기는 작은따옴표가 아니라 물결아이콘에 있는 그거!
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${API_KEY}`)
    .then(response => response.json())
    .then(json => {
      // console.log(json);
      this.setState({
        temp: json.main.temp,
        name: json.weather[0].main,
        isLoaded: true
      })

    });
  }

  render() {
    const { isLoaded, error } = this.state;
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} barStyle="dark-content" />
        { isLoaded ? (<Weather />) : (
          <View style={styles.loading} >
            <Text style={styles.loadingText} >Getting the Fucking Weather</Text>
            {error ? <Text style={styles.errorText}>{error}</Text> : null}
          </View> 
        )}
      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
    // justifyContent: 'space-around',
    // justifyContent: 'flex-end',
    // alignItems: 'flex-end',
    // flexDirection: 'row', // default : column,
    // flexWrap: 'wrap'
  },

  errorText: {
    color: "red",
    backgroundColor: "transparent",
    marginBottom: 40
  },

  loading: {
    flex: 1,
    backgroundColor: "#FDF6AA",
    justifyContent: 'flex-end',
    paddingLeft:25,
  },

  loadingText: {
    fontSize: 38,
    marginBottom: 24
  }
});

 

_getWeather 중심으로 보기!

api 가져오는거랑 fetch then

 

 

[Hooking the component to the weather data]

Stateless : 컴포넌트에 state가 없고, 클래스에서 만들지 않겠다는 뜻

Weather.js에서 

export default class Weather extends Component {

이부분 삭제하고 function으로 만든다. (이따 복붙할게)

 

[Changing the icons and testing on iOS]

 

 

expo/vector-icons

여기에 있는걸 쓸거고 (weather 검색하면 됨)

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

이렇게 바꿔주고 <Material~ 이렇게 !!

그리고 icon: 여기를 위에 링크에서 ios-에서 vetor-icon에 맞는 이름으로 다시 바꿔주기

 

 

 

 

 

https://github.com/daheeahn/190623_WeatherApp

daheeahn/190623_WeatherApp

https://github.com/daheeahn/190623_WeatherAppReiew

daheeahn/190623_WeatherAppReiew