Question

我是React Native的新手，请原谅这个问题是否很简单。我试图在ListView中切换图标。我正在注销正确的响应，但我无法使用“this.state”看到屏幕刷新onPress与该图标。我该怎么办呢？非常感谢您的帮助。

这是我正在使用的一段代码。

getInitialState: function() {
   return {liked:false};
}, 

pressedLike: function(){ 
    this.setState({liked: !this.state.liked})
},

renderRow: function (data) {
    return (
        <View>
            <TouchableHighlight
              onPress={()=>{this.pressedLike}}>
                <View>
                    {this.state.liked ? <Icon name="ios-heart" size={25} color="red" />   : <Icon name="ios-heart-outline" size={25} color="#555" />}
                </View>
            </TouchableHighlight>
       </View>
  );
},

render: function() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            refreshControl={
                <RefreshControl refreshing={this.state.refreshing} onRefresh=   {this.onRefresh}/>
    }
/>

  );
}

Answer 1

这里真的需要发生很多事情。您可能需要某种具有类似布尔值的数据结构，就像这样（仅举例）：

data = [{name: 'Dog', liked: false}, {name: 'Turtle', liked: false}, {name: 'Cat', liked: false}]

然后在你的likeItem方法中，你需要得到你正在循环的项目的索引并更新喜欢的布尔值，并重置dataSource的状态：

likeItem (index) {
  const { data } = this.state
  data[index].liked = !data[index].liked
  this.setState({ dataSource: ds.cloneWithRows(data), data })
}

您可以根据喜欢的值显示图标：

{rowData.liked && <LikedIcon />}
{!rowData.liked && <NotLikedIcon />}

我简要介绍了您可能需要的功能here。

https://rnplay.org/apps/H2hsSg

Answer 2

这很简单，下面是一个如何使用github上可用的node_module react-native-vector-icon更改按下的Awesome图标的示例。

在getInitialState()中，使用您想要的图标声明一个变量，然后选中一个支票，知道要显示的徽标：return{logo: "star-o, check: false"}

然后在相关的按钮/可点击区域中，添加以下方法：
onPress={() => this.stateChange()}

并声明stateChange方法（）并添加：\ this.state.check === false ? this.setState({logo:'star', check:true}) : this.setState({logo:'star-o', check:false})它会查找check var并更改徽标取决于它的价值。这是一个ternair语法...如果你不知道它去google检查。如果你有任何问题... `

如何在React Native中更改onPress上的图标

2 个答案: