Как отключить кнопку в 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
    }
  }
  • Вопрос задан
  • 283 просмотра
Решения вопроса 1
RomReed
@RomReed
JavaScript, Flutter, 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}) //<--------
    }
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы