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

Question

[Аркадий Баганин]

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

У меня такой вопрос: Как отключить кнопки на время запроса к 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
    }
  }

Answer 1

[Роман Александрович]

вам нужно в начале запроса сделать флаг напрмер 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}) //<--------
    }
  }

Comments

[Аркадий Баганин]

Не сработало

[Роман Александрович]

Аркадий Баганин, не сработало понятие растяжимое. Покажите код. А еще засуньте console.log("state",this.state.isFecth) в render. Посмотрим как у вас изменяется рендер.

[Аркадий Баганин]

Роман Александрович, всё пофиксил, спасибо вам большое!