更改反应导航标题上的图标答案

【问题标题】：Change Icon on header of react-navigation更改反应导航标题上的图标
【发布时间】：2017-07-14 02:02:18
【问题描述】：

我有一个 headerRight 是一个星形图标，当用户点击时，它应该变成另一个星形图标（填充）。有什么方向可以在导航上重新渲染？任何帮助将不胜感激。我正在使用 redux 来管理状态。谢谢

【问题讨论】：

【解决方案1】：

使用状态

state = {
  isClick : false,
}

并进行条件渲染

{
  isClick ? <IconFilled/> : <Icon>
}

并在图标操作“onPress”中使用 setState 处理状态

【讨论】：

【解决方案2】：

如果它是短暂的状态变化，并且是您的 Nav 组件独有的，那么您应该将用户单击的状态存储在 this.state 中，正如@KimHau 所述。

但是您将用户点击的结果存储在 Redux 商店中，这意味着它可能会在您的应用中持续存在。

稍作修改：

render() {

    return (

       // ... your other jsx code
       { this.props.hasUserClicked ? < IconFilled /> : < Icon /> }

    )

}

虽然修改组件以接受道具可能更方便，因此它可以管理自己的状态。

  < Icon userClicked={ this.props.hasUserClicked }/>

【讨论】：

【解决方案3】：

已解决。我已经为图标创建了一个组件并处理了该组件内的点击，因为我无法从 material-icons-vector-icons 访问图标。

谢谢你们，你们真的帮了我。

【讨论】：