Как изменить имя значка при нажатии в реагировать родной вектор значок

Question

Я использую response-native-vector-icons

И я хочу изменить имя иконки при первой загрузке экрана. Я вижу значок очень хорошо, но при нажатии его нетработать больше, и я вижу знак вопроса ?

this.state={
favIcon:"heart-empty"
}
 <Icon name={`ios-${favIcon}`} style={{ backgroundColor: "red" }} size={30} color="#fff" onPress={() => this.setState({ favIcon: "heart" }, alert(favIcon))} />

любая идея обрабатывать имя, чтобы принять переменную?

и когда я регистрирую this.state.FavIcon, это undefined !!

-

не берите в голову, что это работает сейчас: D, я просто редактирую имя иконки, когда setState, и переименовываю имя штата

теперь новый Q - когда я нажимал значок, я меняю значок на «ios-heart», теперь, если я хочу нажать снова, я хочу изменить на «ios-heart-empty»

идея функции, которую я хочу сделать, это добавить в избранное и удалить из избранного

Answer 1

Вы можете сделать что-то следующим образом:

constructor(props) {
   super(props)

   this.state={ 
      providerId: '',
      providerName: '',
      providerService: '',
      fav: false
   } 

   this.ref = firebase.database().ref(`favorites/${firebase.auth().currentUser.uid}`);
}

componentDidMount() {
    this._onFavourite = this.ref.on('child_added', () => {
        this.setState({
            fav: true
        }, alert("Added To Favorite List"))
    })
    this._onUnFavourite = this.ref.on('child_removed', () => {
        this.setState({
            fav: false
        }, alert("Removed from Favorite List"))
    })
}

componentWillUnmount() {
    if (this._onFavourite) {
        this.ref.off('child_added', this._onFavourite);
    }
    if (this._onUnFavourite) {
        this.ref.off('child_removed', this._onUnFavourite);
    }
}

_favOrUnFav = () => {
    if (!this.state.fav){ 
        const { 
            providerId,
            providerName,
            providerService
        } = this.state;

        this.ref.set({
            providerId,
            providerName,
            providerService
        })
    } else ref.set(null)  OR you can use ref.remove()
}

const {
     fav
} = this.state

<Icon 
    name={`ios-heart${fav ? "" : "-empty"}`}
    style={{ backgroundColor: "red" }} 
    size={30} 
    color="#fff" 
    onPress={this._favOrUnFav} 
/>

Надеюсь, это поможет вам.

Answer 2

onPress доступно только для Icon.Button, но не Icon.См. https://github.com/oblador/react-native-vector-icons#iconbutton-component для получения дополнительной информации о Icon.Button.