Индикатор активности зависает во время запроса - PullRequest
Новая
       15

Индикатор активности зависает во время запроса

0 голосов
/ 08 мая 2018

Я создаю приложение погоды в React Native, где прогноз погоды, основанный на позиции пользователя, выбирается непосредственно при запуске приложения.

Поскольку этот запрос занимает некоторое время, я хочу показать индикатор активности, пока состояние не будет обновлено с извлеченными данными. Все отлично работает с индикатором, который отображается во время запроса и исчезает, когда он должен, однако, похоже, что есть некоторая проблема с анимацией индикатора, потому что он зависает почти сразу и остается замороженным, пока не исчезнет. Есть предложения, что может быть не так?

Исходное состояние приложения: 

   this.state = {
  searchedCity: '',
  placeholder: 'Search city...',
  city: '',
  country: '',
  temperature: null,
  weatherCondition: null,
  weatherDescription: null,
  error: null,
  icon: null,
  isLoading: true,
  };
}

Получает положение на основе координат: 

componentDidMount() {

 navigator.geolocation.getCurrentPosition(    
   position => {
  this.getWeatherByLoc(position.coords.latitude, position.coords.longitude);
   },
   error => {
    this.setState({
       error: 'Error fetching weather conditions!'  
     })
   }
 )
}

Извлекает погодные условия и обновляет состояние. isLoading имеет значение false, чтобы скрыть индикатор активности: 

getWeatherByLoc(lat, lon) {

api.fetchWeatherByLoc(lat, lon).then((data) => {

  this.setState({
    temperature: data.main.temp,
    city: data.name,
    weatherCondition: data.weather[0].main,
    weatherDescription: data.weather[0].description,
    isLoading: false,
  });
});
}

Метод визуализации: 

render() {
const { weatherCondition, weatherDescription, temperature, city, country, isLoading } = this.state;

return (
        <View style={styles.container}>
        <Weather weatherCondition={weatherCondition} weatherDescription={weatherDescription} city={city} country={country} temperature={temperature}/> 
        {this.renderLoading()}
        <View style={styles.inputContainer}>
        <TextInput style={styles.textInputStyle}
        onChangeText={(searchedCity) => this.setState({searchedCity}) }
        onSubmitEditing={ () => this.setState(this.getWeather())}
        placeholder = {this.state.placeholder}
        clearTextOnFocus={true}
        enablesReturnKeyAutomatically={true}
        />
        </View>
        )}</View>);
}

Метод отображения индикатора активности: 

  renderLoading() {
const {isLoading} = this.state;  
  if(isLoading) {
    return (
  <View style={styles.loading}><BarIndicator color="white" animating = {isLoading}/> </View> 
    )
} else {
  return (null)
}
}
...