Question

我已经搜寻了几天来解决这个问题。单击其中一个图标时，我需要更改另一个图标的颜色。

我正在使用react-native-vector-icons

 this.setState({
        listaPlantel: Object.entries(dataArray).map(function ([key, nome]) {
            if (that.state.mercado.status_mercado == 2) {
                dadosAtleta = that.state.pontuados[nome.atleta_id];
            }
            return (
                <ListItem avatar key={key} button onPress={() => that.detailsScreen(nome)}>
                    <Left>
                        <Thumbnail source={{ uri: nome.foto.replace('FORMATO', '80x80') }} />
                    </Left>
                    <Body>
                        <Text>{nome.apelido}</Text>
                        <Text note>{that.state.posicoes ? that.state.posicoes[nome.posicao_id]['nome'] : ''} - {that.state.clubes ? that.state.clubes[nome.clube_id]['nome'] : ''}</Text>
                        <Text style={{ textAlign: 'left' }}>Última: {nome.pontos_num} Média: {nome.media_num} {' $' + nome.preco_num}</Text>
                    </Body>
                    <Right>
                        {/*<Text>{dadosAtleta ? dadosAtleta['pontuacao'] : nome.pontos_num}</Text>*/}
                        <Icon name="md-close-circle" size={30} />
                        <Icon type="Foundation" name="md-contact" key={key} size={30} color={that.state.id_capitao === nome.atleta_id ? that.state.corCap : that.state.corGeral} onPress={() => that.setState({ id_capitao: nome.atleta_id })} />
                    </Right>
                </ListItem>
            )
        }),
    });

Answer 1

似乎您要在setState中放入条件和功能，我建议您在此处阅读有关生命周期和应用程序状态的信息：

https://reactjs.org/docs/state-and-lifecycle.html

作为您要尝试更新值的示例，请考虑以下情况：

初始颜色：红色，更新后的颜色：蓝色（例如）

在您的构造函数中：

constructor (props) {
    super(props);
    this.state = {
        /*Initial State and Colour*/
      iconColour : "red"
    }
}

在您的渲染方法中：

 <ListItem avatar key={key} button onPress={() => that.detailsScreen(nome)}>
    <Icon color={this.state.iconColour}/>
 </ListItem>

在onPress函数中：

this.setState({
  iconColor : "blue"
})

React Native-单击更改其他图标的颜色

1 个答案: