如何使用 React Native 制作類似於 Instagram 的點贊功能（如按鈕）

Question

您好，我正在嘗試通過在按下時更改圖像來制作帶有 react-native 的類似 Instagram 的按鈕，但是當我按下圖像時沒有任何更改

一切都是最新的。 並且代碼沒有錯誤。

這是我的代碼：

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

您應該設置狀態以重新渲染組件

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

像這樣改變你的 onPress 功能。 您應該為反應組件設置狀態以進行更新，這是基本的事情

還有一些更正。 以下是更正后的代碼

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