Facebookのような機能はネイティブに反応します

Question

私は画像の一覧を使用しています。すべての画像に下のようなボタンがあります。私が好きなボタンをクリックすると、うまく動いているようになります。しかし、それは私がクリックした画像上で動作するはずです。現在、それはすべての画像の数のように増加しています。私はネイティブに反応するために新しいです。どんな助けも高く評価されます。 ここでは、これはあなたが別のコンポーネントにあなたのカードを変換したり状態で別々のようなカウントを格納する必要が私のコード

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> 
); 
}