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

Question

我有一个标题右是一个星形图标，当用户单击时，它应该成为另一个星形图标(填充(。 有什么方向可以在导航上进行这种重新渲染吗？ 任何帮助将不胜感激。 我正在使用 redux 来管理状态。 谢谢

Answer 1

使用状态

state = {
isClick : false,
}

并执行条件渲染

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

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

Answer 2

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

但是，您将用户单击的结果存储在 Redux 存储中，这意味着它可能意味着它应该在您的应用程序中持续存在。

略有修改：

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

尽管修改组件以接受 prop 可能更方便，以便它可以管理自己的状态。

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

Answer 3

解决了。 我已经为图标创建了一个组件并处理了该组件内的单击，因为我无法访问材料图标矢量图标中的图标。

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