像Facebook这样的功能反应原生

Question

我正在使用图像列表。每个图像都有一个像按钮一样。当我点击Like按钮时，喜欢应该是增加，这是正常工作。但它应该适用于我点击的图像。目前它正在增加像所有图像的数量。我是新的反应原生。任何帮助将不胜感激。 这是我的代码

export default class Art extends Component {

  constructor(props) {
    super(props)
    this.state = {
        value: null,
        liked:false
    }
  }
_increaseValue(){
console.log(this.state.liked)
    if (this.state.liked==false)
        {
            this.setState({liked: !this.state.liked})
            newvalue =this.state.value +1;
            this.setState({value:newvalue})
        }
      else 
        {    
        this.setState({liked: !this.state.liked})
        newvalue =this.state.value -1;
        this.setState({value:newvalue}       
     }                       
}
  render() {
    const datas = [
      {
        img: images[0]
      },
      {
        img: images[1]
      },
      {
        img: images[2]
      },
      {
        img: images[3]
      },
    ];
    const { navigate } = this.props.navigation;

    // eslint-disable-line
    return (
      <Content padder style={{ marginTop: 0, backgroundColor: '#3b5998' }}>
        <List
          style={{ marginLeft: -19, marginRight: -19 }}
          dataArray={datas}
          renderRow={data =>
            <ListItem  >
              <Card

                wrapperStyle={{ marginLeft: -10, marginTop: -10, marginRight: -10, }} containerStyle={{ marginLeft: 2, marginTop: -5, }}>
                <TouchableOpacity activeOpacity={.5} onPress={() => navigate('ImageDisplay',{item:data})}>                  
                  <Image source={{ uri: data.img }} style={[styles.imageContainer, styles.image]}/>
                    </TouchableOpacity>
                     <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginTop: 20 }}>
                     <View style={{flexDirection:'row'}}>
                     <TouchableOpacity activeOpacity={.5} onPress={() => {this._increaseValue()}}>
                       <View>
                       {this.state.liked ? <Icon active name="favorite" style={styles.iconCountContainer} color='red' size={14}/>
                       : <Icon name="favorite" style={styles.iconCountContainer} size={14}/>}
                </View></TouchableOpacity>
                <Text style={{color:'#000000',fontSize:15, marginLeft:12, marginTop:5}}>{this.state.value} Likes </Text>
                   </View>

                  <View style={styles.iconCountContainer}>
                    <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                  </View>


                </View>

              </Card>
            </ListItem>
          }
        />
      </Content>
    );
  }
}

Answer 1

您需要将卡片转换为单独的组件，或者将状态分别存储在状态中。您可以通过多种方式解决此问题。我将举例说明如何实现此行为，您可以按照自己喜欢的方式实现它。

示例

export default class CutomListItem extends React.Component {
  constructor(props) {
    this.state = {
      likes: 0
    };
  }
  _increaseValue = () => {
    this.setState((prevState) => {
      return {
        likes: prevState.likes++
      };
    });
  }
  render() {
    const { data, navigate, share } = this.props; // send data with props
    <ListItem  >
      <Card
        wrapperStyle={{ marginLeft: -10, marginTop: -10, marginRight: -10, }} containerStyle={{ marginLeft: 2, marginTop: -5, }}>
        <TouchableOpacity activeOpacity={.5} onPress={() => navigate('ImageDisplay',{item:data})}>                  
          <Image source={{ uri: data.img }} style={[styles.imageContainer, styles.image]}/>
        </TouchableOpacity>
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginTop: 20 }}>
          <View style={{flexDirection:'row'}}>
            <TouchableOpacity activeOpacity={.5} onPress={() => {this._increaseValue()}}>
              <View>
                {this.state.liked ? <Icon active name="favorite" style={styles.iconCountContainer} color='red' size={14}/>
                : <Icon name="favorite" style={styles.iconCountContainer} size={14}/>}
              </View></TouchableOpacity>
              <Text style={{color:'#000000',fontSize:15, marginLeft:12, marginTop:5}}>{this.state.likes} Likes </Text>
            </View>

            <View style={styles.iconCountContainer}>
              <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
            </View>
          </View>          
      </Card>
    </ListItem>
  }
}

return (
 <Content padder style={{ marginTop: 0, backgroundColor: '#3b5998' }}>
   <List
     style={{ marginLeft: -19, marginRight: -19 }}
     dataArray={datas}
     renderRow={data => (<CutomListItem data={data} navigate={navigate} share={Share} />}
   />
 </Content>
 );
}