react-native - 如果值更改，图标会更改

Question

我有一个喜欢icon和value。status 0 or 1想要显示thumbs up icon如果status是1和thumbs down如果status是。0点击toggle时相同

<View style={{marginTop:10}}><Icon  name={itemData.wliststatus===0?"thumbs-up":"thumbs-down"} size={16} type="font-awesome" onPress={() => this.navigateToApp(itemData)}/></View>

取自API

itemdata:{
"userid": "1",
    "views": "258",
    "wliststatus": 0,
}

<View style={{marginTop:10}}><Icon  name={itemData.wliststatus===0?"thumbs-up":"thumbs-down"} size={16} type="font-awesome" onPress={() => this.navigateToApp(itemData)}/></View>

Answer 1

首先创建那个state variable持有whliststatus value并创建function那个toggle value。state variable

 state = { whliststatus = false }

const handlePress = itemData => this.setState({ whlistatus: !this.state.whlistatus }, () => { this.navigateToApp(itemData)} })


<View style={{marginTop:10}}><Icon  name={this.state.whliststatus ? "thumbs-up" : "thumbs-down"} size={16} type="font-awesome" onPress={this.handlePress(itemData)}/></View>

Answer 2

使用状态动态更改项目。
首先，在state变量中，将您喜欢的状态值设置为 false。
请记住：state变量将全局驻留在您的类中

state = {
    liked: false
};

然后在componentDidMount中，成功获取数据后，在 state 中相应地更新您的状态：

componentDidMount() {
    fetch(...)
    .then(res => res.json())
    .then(res => {
        ...
        itemdata:{
            "userid": "1",
            "views": "258",
            "wliststatus": 0,
        }

        // here update "liked" status in state
        this.setState({ liked: itemdata.wliststatus == 0 ? true : false });
        ...
    })
    .catch(error => console.log(error));
}

现在，直接进入 render 方法，获取或设置状态和数据将自动处理：

render() {
    const { liked } = this.state;

    return (
        <View style={{marginTop:10}}>
            <Icon name={ liked ? "thumbs-up" : "thumbs-down" } 
            size={16} type="font-awesome" 
            onPress={() => this.navigateToApp()}/>
        </View>
    );
}

然后看起来你可能正在更新类似的this.navigateToApp功能。在此方法中，您可以将状态更新为：

navigateToApp() {
    const { liked } = this.state;

    ...

    // here just switch your liked status
    this.setState({ liked: !liked });

    ...
}