如何使用 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> 
 )} 
}