[weather_app_4] 상태바/벡터아이콘/위치정보 에러처리

프로젝트/[react]weather_app

[weather_app_4] 상태바/벡터아이콘/위치정보 에러처리

samsaraA 2018. 4. 25. 17:12

상태바(status bar)없애기

react-native가 제공하는 api 사용

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

render() {
    const { isLoaded } = this.state;
    return (
      <View style={styles.container}>
        <StatusBar hidden="true" />
        {isLoaded ? <Weather /> : (
          <View style={styles.loading}>
            <Text style={styles.LoadingText}>Getting the weather</Text>
          </View>
        )}
      </View>
    );
  }

아이콘

expo의 패키지 vector-icon 사용하기

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

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

이런식으로 사용한다 name props에 사용하고 싶은 것을 집어넣자

 <Ionicons color="white" size={144} name="ios-rainy" />

리액트 네이티브에서 위치정보 얻기

componentDidMount(){
    navigator.geolocation.getCurrentPosition(
      position => {
        console.log(position);
      }
    );
  }

앱이 열리고, 컴포넌트가 마운트되면 위치정보를 받고 isLoaded는 true가 되고 날씨정보를 보여줌

export default class App extends Component {
  state = {
    isLoaded: false
  };
  componentDidMount(){
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        isLoaded: true
      });
    },
    error => {
      console.log(error);
    }
    );
  }
  render() {
    const { isLoaded } = this.state;
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        {isLoaded ? <Weather /> : (
          <View style={styles.loading}>
            <Text style={styles.LoadingText}>Getting the weather</Text>
          </View>
        )}
      </View>
    );
  }
}

위치정보 제공 허락하겠냐고 뜨는데 이 메세지도 변경 가능함

이 위치정보를 api로 보내야함

그 전에 에러정보 처리하는법

export default class App extends Component {
  state = {
    isLoaded: false
  };
  componentDidMount(){
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        isLoaded: true,
        error: null
      });
    },
    error => {
      this.setState({
        error: "something went wrong"
      })
    }
    );
  }
  render() {
    const { isLoaded, error } = this.state;
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        {isLoaded ? <Weather /> : (
          <View style={styles.loading}>
            <Text style={styles.LoadingText}>Getting the weather</Text>
            {error ? <Text style={styles.errorText}>{error}</Text> : null}
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  errorText: {
    color: "red",
    backgroundColor: "transparent",
    marginBottom: 40
  },
  loading:{
    flex: 1,
    backgroundColor:'#FDF6AA',
    justifyContent: "flex-end",
    paddingLeft: 25
  },
  LoadingText:{
    fontSize: 38,
    marginBottom: 100
  }
});