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

상태바(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

}

});