0

我正在使用 react-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它是未定义的！

--

没关系它现在可以工作了：D，我只是在 setState 时编辑图标的名称，并重命名状态的名称

现在新Q是当我按下图标时我将图标更改为“ios-heart”，现在如果我想再次按下我想更改为“ios-heart-empty”

我想做的功能的想法是添加到收藏夹和从收藏夹中删除

4

2 回答 2

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} 
/>

我希望它对你有帮助。

于 2019-05-20T00:40:00.610 回答
0

onPress仅适用于Icon.Button，不适用Icon。有关. _ _Icon.Button

于 2019-05-19T21:24:02.373 回答