[weather_app_2] Loading View

프로젝트/[react]weather_app

[weather_app_2] Loading View

samsaraA 2018. 4. 16. 21:11

정보를 받았는지 확인하는 indicator가 필요하다.

  state = {
    isLoaded: false
  }

로딩이 완료되면 정보를 보여주고 , 로딩이 완료되지 않으면 로딩 스크린을 보여주자

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

배경색과 텍스트 모양

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