Javascript 通过React Native更改图标activeIndex

如何通过React Native更改图标activeIndex？ 我正在使用

native base

模块，但不工作，只是

activeIndex==0

处于活动状态，我的函数不工作

代码：

import {Icon, Button} from 'native-base';
type Props = {};
export default class App extends Component<Props> {
  constructor(props) {

    super(props);
    this.segmentClicked = this.segmentClicked.bind(this);
    this.state = {
      activeIndex: 0
    }
  }

  segmentClicked = (index) => {
    this.setState = ({
      activeIndex: index
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection: 'row', justifyContent: 'space-around', borderTopWidth: 1, borderTopColor: '#eae5e5'}}>
          <Button
            onPress={this.segmentClicked(0)}
            active={this.state.activeIndex == 0}
          >
            <Icon name='ios-apps-outline'
              style={[this.state.activeIndex == 0 ? {} : {color: 'gray'}]}
            />
          </Button>
          <Button
            onPress={this.segmentClicked(1)}
            active={this.state.activeIndex == 1}
          >
            <Icon name='ios-list-outline'
              style={[this.state.activeIndex == 1 ? {} : {color: 'gray'}]}
            />
          </Button>
          <Button
            onPress={this.segmentClicked(2)}
            active={this.state.activeIndex == 2}
          >
            <Icon name='ios-people-outline'
              style={[this.state.activeIndex == 2 ? {} : {color: 'gray'}]}
            />
          </Button>
          <Button
            onPress={this.segmentClicked(3)}
            active={this.state.activeIndex == 3}
          >
            <Icon name='ios-bookmark-outline'
              style={[this.state.activeIndex == 3 ? {} : {color: 'gray'}]}
            />
          </Button>
        </View>
      </View>
    );
  }
}

从'native base'导入{图标，按钮}；
类型Props={}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.segmentClicked=this.segmentClicked.bind（this）；
此.state={
活动索引：0
}
}
分段单击=（索引）=>{
this.setState=({
活动索引：索引
})
}
render（）{
返回(
);
}
}

当您编写此函数时，您正在调用该函数。单击（1）。相反，您希望提供一个在按下

按钮时调用的函数

例如，您可以创建一个新的内联箭头函数

<Button
  onPress={() => this.segmentClicked(1)}
  active={this.state.activeIndex == 1}
>
  <Icon name='ios-list-outline'
    style={[this.state.activeIndex == 1 ? {} : {color: 'gray'}]}
  />
</Button>

我已更改，但未发生任何事情，与过去一样，0处于活动状态。@sedricheidariarie我发现第二个错误。我更新了答案。这很奇怪，因为我的分段单击不工作，你的分段单击工作。这是我点击的片段：``//segmentClicked=（index）=>{//this.setState=（{//activeIndex:index/}）/}````@sedricheidarizarie是的，如果你仔细看，你会发现你正在写
setState=
。您不应该覆盖
setState
，而是将其作为函数调用
setState（）
。啊，是的，谢谢。感激
segmentClicked = (index) => {
  this.setState({
    activeIndex: index
  });
}