Как отключить кнопку в React Native???

Добрый вечер, день, утро)))

У меня такой вопрос: Как отключить кнопки на время запроса к API???

Вот код самой кнопки:
<View style={navigationPostcards}>
          <TouchableOpacity onPress={this._backwardPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowBack.png')} style={arrow} />
          </TouchableOpacity>
          <TouchableOpacity onPress={this._nextPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowNext.png')} style={arrow} />
          </TouchableOpacity>
          <View style={pagesCountContainer}>
            <Image source={require('./src/components/uikit/images/pagesCountIcon.png')} style={pagesCountIcon} /><Text style={pageCountInfo}>{page + ' / ' + pageMax}</Text>
          </View>
        </View>


Вот код запроса к API:
_getPostcards () {
    try {
      const url = domain + '?app_id='+ app_id +'&category='+ category +'&page=' + this.state.page
      return fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({ data: responseJson.photos, pageMax: responseJson.pages })
      })
      .catch((error) =>{
        console.error(error);
      });
    } catch (e) {
      throw e
    }
  }
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
RomReed
@RomReed
JavaScript, Reatc js, ReactNative, Redux, Firebase
вам нужно в начале запроса сделать флаг напрмер isFetch и поставить его в true. Если вопрос закончился или же произошла какая то ошибка во время запроса то поставить его в false. И если isFetch true то либо прятать кнопки либо делать их disable или не выполнять действия во время их нажатия.

{this.state.isFetch&&<View style={navigationPostcards}>
          <TouchableOpacity onPress={this._backwardPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowBack.png')} style={arrow} />
          </TouchableOpacity>
          <TouchableOpacity onPress={this._nextPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowNext.png')} style={arrow} />
          </TouchableOpacity>
          <View style={pagesCountContainer}>
            <Image source={require('./src/components/uikit/images/pagesCountIcon.png')} style={pagesCountIcon} /><Text style={pageCountInfo}>{page + ' / ' + pageMax}</Text>
          </View>
        </View>}


_getPostcards () {
    try {
this.setState({isFecth:true})
      const url = domain + '?app_id='+ app_id +'&category='+ category +'&page=' + this.state.page
      return fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({ data: responseJson.photos, pageMax: responseJson.pages })
this.setState({isFecth:false}) //<--------
      })
      .catch((error) =>{
        console.error(error);
       this.setState({isFecth:false}) //<--------
      });
    } catch (e) {
      throw e
      this.setState({isFecth:false}) //<--------
    }
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Рокетбанк Москва
от 100 000 до 190 000 руб.
Datcroft Games Воронеж
от 80 000 до 150 000 руб.
o.vision Санкт-Петербург
от 120 000 до 180 000 руб.
22 сент. 2019, в 12:35
600 руб./за проект
22 сент. 2019, в 12:15
12000 руб./за проект