React Native: onPress: Как переключить текст кнопки и вызов функции?

Question

У меня есть кнопка, которая выглядит следующим образом...

<View style={styles.addToFavoritesStyle}>
  <Button onPress={this.addToFavorites}>ADD TO FAVORITES</Button>
</View>

addToFavorites() {
  ...run some code
}

После того, как пользователь нажмет кнопку, как я могу изменить текст кнопки на "УДАЛИТЬ ИЗ ИЗБРАННЫХ", изменить стили кнопки и вызвать другую функцию?

Answer 1

Вы хотите использовать в своих интересах государство. В свой компонент добавьте конструктор:

constructor(props) {
  super(props);
  this.state = {
    inFavorites: false
  }
}

Сделайте так, чтобы ваша кнопка выглядела так:

<Button onPress={this.addToFavorites}>
  {this.state.inFavorites ? "REMOVE FROM " : "ADD TO " + "FAVORITES"}
</Button>

В вашем addToFavorites() Функция добавить вызов, чтобы установить состояние вашего компонента:

this.setState({ inFavorites: true});

Это не полный пример, но он установит состояние вашего компонента. Вам нужно будет снова установить состояние, когда они удалят элемент из избранного.

Answer 2

Это довольно простой вопрос, я предлагаю вам прочитать документацию React, прежде чем приехать сюда.

Чтобы дать вам общий обзор, хотя, когда вы нажимаете кнопку (onClick), вы вызываете функцию, которая изменяет состояние, вызывая повторный рендеринг, который при таком повторном рендеринге у вас будет иметь условие, подобное такому...

{this.state.addedToFavorites ? "Remove from favorites" : "Add to favorites"}