[react-native] EXPO로 시작해보기 7 - 다른화면으로 넘어가면서 값 전달하기

간단하게 조건에 따라 다른화면으로 전환하는 것은 아래글과 같다 

[프레임워크/리액트네이티브] - [react-native] 시작해보기 6 - 조건에 따라 다른 화면 보여주기

 

 

 

---

 

 

 

그럼 조건에 따라 화면 전환이 일어날때 값을 전달하려면 어떻게 해야할까 

 

처음에 현재 위치를 가져오고,

현재위치가 있다면 

날씨 API 를 이용해 해당 위치의 날씨를 가져와 화면이 전환되고 날씨에 대한 내용을 출력해 주도록 만들어본 것이다. 

 

App.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, SafeAreaView } from 'react-native';

//전환될 화면 import
import NewPage from './NewPage';


// https://openweathermap.org/current - 해당 날씨 api 를 이용 

export default class App extends Component {
  state= {
    isLoaded : false, // 화면이 전환될 여부
    error : null, // 에러메세지
    temperatuer : null,//온도
    name:null // 이름 
  }
  componentDidMount(){
  
  //기본제공 코드를 이용해 현재 위치를 가져온다 
    navigator.geolocation.getCurrentPosition(
      
      position => {
      // 현재 위치가 있다면 해당 값을 이용해 _getWeather 함수 호출 
        this._getWeather(position.coords.latitude, position.coords.longitude);
      },
      error => {
      // 현재 위치를 가져올수 없다면 해당 에러메세지를 저장 
        this.setState({
          error: error
        });
      }
    );
  }
  
  //_getWeather 함수 
  _getWeather = (lat, lon) => {
  //api 를 호출
    fetch('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&appid=API_KEY').then(
      response =>  response.json()
      //결과를 json 으로 저장     
    ).then(
      json => {
        console.log(json);
//해당 결과를 이용해 setState 로 각 값을 저장 한다. 
        this.setState({
          temperatuer: json.main.temp,
          name: json.weather[0].main,
          isLoaded: true // 모든 값을 가져왓으므로 로딩완료 // 페이지 전환에 이용됨 
        });
        // console.log(this.state);
      }
    )
  }
  render(){
    const { isLoaded, error, temperatuer, name} = this.state;
    return (
    //현재 출력될 페이지 
      <View style={styles.container}>
      
      
      /**************************값을전달하는부분******************************/
      //isLoaded 가 참이면  NewPage 를 출력 거짓이면 로딩중 화면을 출력 
      //NewPage 화면을 출력할 때 파라미터값으로 weatherName 과 temp 를 전달한다. 
        {isLoaded ? <NewPage weatherName={name} temp={Math.floor(temperatuer - 273.15)} /> : (
        <View style={styles.loading}>
          <Text style={styles.loadingText}>로딩중 </Text>  
          //에러메세지가 있다면 메세지를 출력 
          {error ? <Text style={styles.errorText}>{error}</Text> : null}
        </View>)}
      </View>
       
    )
  }
}

 

 

NewPage.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import { LinearGradient } from 'expo';
import { Ionicons } from '@expo/vector-icons';
//파라미터값을 받아오기 위해 필요 
import PropTypes from 'prop-types';


//해당 조건에 따라 다른 결과를 출력하기 위해 필요함. 
const weatherCases = {
    Rain:{
        color:["#00C6FB","#005BEA"],
        title:"rain day",
        icon: "ios-rainy"
    },
    Clear:{
        color:["#00C6FB","#005BEA"],
        title:"Sunny day",
        icon: "ios-sunny"
    },
    Thunderstorm:{
        color:["#00C6FB","#005BEA"],
        title:"Thunderstorm day",
        icon: "ios-thunderstorm"
    },
    Clouds:{
        color:["#00C6FB","#005BEA"],
        title:"Clouds day",
        icon: "ios-cloudy"
    },
    Mist:{
        color:["#00C6FB","#005BEA"],
        title:"Mist day",
        icon: "ios-cloudy"
    }
}

/*********************전달받은값***************************/
//화면에 출력될 컴포넌트들을 함수로 만든다. (App.js에서 전달받은 값이 파라미터로 전달됨)

function NewPage({weatherName,temp}){
    console.log(weatherName);
    return(
        <LinearGradient style={styles.container} colors={weatherCases[weatherName].color} >
                //전달받은 weatherName값에 따라 배경의 LinearGradient가 다르게 출력됨 
                <StatusBar barStyle="dark-content" /> 
                <View style={styles.upper}>
                //전달받은 값에 따라 아이콘과 온도가 다르게 표시된다. 
                    <Ionicons color="white" size={144} name={weatherCases[weatherName].icon} />
                    <Text style={styles.title}>{temp}</Text>
                </View>
                <View style={styles.lower}>
                    <Text style={styles.title}>{weatherCases[weatherName].title}</Text>
                </View>
            </LinearGradient>
    )
}
//prop의 temp  가 숫자이며, 값이 있는지 확인한다. isRequired를 제외하면 타입만 검사
NewPage.propTypes = {
    temp: PropTypes.number.isRequired
};

//함수를 export 
export default NewPage;

 

 

다음 강의를 참고하여 작성하였습니다. 

 

https://academy.nomadcoders.co/courses/216885/lectures/3368852