如何使用 React Native 制作类似于 Instagram 的点赞功能（如按钮）

Question

Hello I am trying to make a Instagram like button with react-native by changing the image on press, but when I press the image no changes

Everything is up to date. And the code has no errors.

Here is my code:

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image,navigation,TouchableOpacity } from 'react-native';
import { Container, Content, Badge, Left, Icon, Header} from 'native-base';
import { DrawerActions } from 'react-navigation';

class HomePage extends Component {
    constructor(props){
        super(props)
        this.state = {
        likedQ: false,   
         uri: require('./images/mianIcons/like.png') 
        }
    }

    _ifLiked = () => {
        likedQ = true;
        uri: require('./images/mianIcons/like3.png') 
    }

    render(){
        return(
               <View>
                    <Header>
                        <Left>
                          <Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()}
                          />
                        </Left>
                   </Header>   

                  <TouchableOpacity onPress={this._ifLiked()}>  
                    <Image 
                    style={{width: 32 , height: 32 ,}}
                    source={require(uri)}
                   />
                  </TouchableOpacity>          
           </View>           

        )
    }
}

export default HomePage;

Answer 1

You should set state to rerender the component

_ifLiked = () => { 
  this.setState({
    likedQ: true, 
    uri: require('./images/mianIcons/like3.png')
  })
} 

change your onPress function like this. It is basic thing that you should set state for react components to update

There are some more corrections. Following is the corrected code

class HomePage extends Component{ 
  constructor(props){ 
    super(props) 
    this.state = { 
      likedQ: false, 
      uri: './images/mianIcons/like.png' 
    } 
  } 

  _ifLiked = () => { 
  this.setState({
    likedQ: true, 
    uri: require('./images/mianIcons/like3.png')
  }
}  

  render(){ 
   return( 
    <View> 
      <Header> 
        <Left> 
          <Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()} /> 
       </Left> 
     </Header> 
     <TouchableOpacity onPress={() => this._ifLiked}> 
       <Image style={{width: 32 , height: 32}} source={require(this.state.uri)} /> 
     </TouchableOpacity> 
   </View> 
 )} 
}