React Native 0.70.5实现图片双击触发点赞状态的方法

一、原生实现（无需额外依赖） #

你可以通过Pressable组件结合时间差判断实现双击逻辑，不需要引入第三方包。核心思路是记录上一次点击的时间，当两次点击间隔小于300ms时判定为双击，触发点赞状态切换。

修改你的PostCard组件，将帖子图片用Pressable包裹，添加双击判断逻辑：

import { StyleSheet, Text, View, Image, Pressable } from 'react-native'
import React, { useState, useRef } from 'react'
import { FontAwesome } from '@expo/vector-icons';
import { icons1 } from '../CommonCss/PageCss';
import { Feather } from '@expo/vector-icons';
import styles from './styles';

const PostCard = ({
  key,
  username,
  postimg,
  profileimg,
  likes,
  comments,
}) => {
  const [isliked, setIsliked] = useState(false)
  const [showcomments, setShowcomments] = useState(false)
  const lastPressTime = useRef(0) // 记录上一次点击时间

  const handleDoubleTap = () => {
    const now = Date.now()
    // 两次点击间隔小于300ms则判定为双击
    if (now - lastPressTime.current < 300) {
      setIsliked(prev => !prev)
    }
    lastPressTime.current = now
  }

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Image source={{ uri: profileimg }} style={styles.profileImage} />
        <Text style={styles.Username}>{username}</Text>
      </View>
      {/* 用Pressable包裹帖子图片，处理双击 */}
      <Pressable onPress={handleDoubleTap} style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}>
        <Image source={{ uri: postimg }} style={styles.posts} />
      </Pressable>
      <View style={styles.section}>
        {
          isliked ?
            <View style={styles.likesection}>
              <FontAwesome name="heart" size={24} color="black" style={styles.iconliked} onPress={() => {
                setIsliked(false)
              }} />
              <Text style={styles.liked}>{likes.length + 1}</Text>
            </View>
            :
            <View style={styles.likesection}>
              <Feather name="heart" size={24} color="black" style={icons1} onPress={() => {
                setIsliked(true)
              }} />
              <Text style={styles.notliked}>{likes.length}</Text>
            </View>
        }
        <View style={styles.commentsection}>
          <FontAwesome name="comment" size={24} color="black" style={icons1}
            onPress={() => {
              setShowcomments(!showcomments)
            }}
          />
        </View>
      </View>
      {
        showcomments == true &&
        <View style={styles.section2}>
          {
            comments.map((item, index) => {
              return (
                <View style={styles.section2s1} key={item.id}>
                  <Text style={styles.commentUser}>{item.username}</Text>
                  <Text style={styles.commentText}>{item.comments}</Text>
                </View>
              )
            })
          }
        </View>
      }
    </View>
  )
}

export default PostCard

二、使用预构建手势库实现 #

如果想更简洁地处理手势，可以使用react-native-gesture-handler（Expo项目默认已集成，原生RN项目需手动安装），它提供了专门的双击手势处理。

步骤1：确保依赖已安装 #

Expo项目无需额外安装，原生RN项目执行：

npm install react-native-gesture-handler
# 或 yarn add react-native-gesture-handler

步骤2：修改组件代码 #

导入TapGestureHandler，将帖子图片包裹在其中，设置双击触发逻辑：

import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState } from 'react'
import { TapGestureHandler } from 'react-native-gesture-handler'
import { FontAwesome } from '@expo/vector-icons';
import { icons1 } from '../CommonCss/PageCss';
import { Feather } from '@expo/vector-icons';
import styles from './styles';

const PostCard = ({
  key,
  username,
  postimg,
  profileimg,
  likes,
  comments,
}) => {
  const [isliked, setIsliked] = useState(false)
  const [showcomments, setShowcomments] = useState(false)

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Image source={{ uri: profileimg }} style={styles.profileImage} />
        <Text style={styles.Username}>{username}</Text>
      </View>
      {/* 用TapGestureHandler实现双击 */}
      <TapGestureHandler
        numberOfTaps={2}
        onActivated={() => setIsliked(prev => !prev)}
      >
        <Image source={{ uri: postimg }} style={styles.posts} />
      </TapGestureHandler>
      <View style={styles.section}>
        {
          isliked ?
            <View style={styles.likesection}>
              <FontAwesome name="heart" size={24} color="black" style={styles.iconliked} onPress={() => {
                setIsliked(false)
              }} />
              <Text style={styles.liked}>{likes.length + 1}</Text>
            </View>
            :
            <View style={styles.likesection}>
              <Feather name="heart" size={24} color="black" style={icons1} onPress={() => {
                setIsliked(true)
              }} />
              <Text style={styles.notliked}>{likes.length}</Text>
            </View>
        }
        <View style={styles.commentsection}>
          <FontAwesome name="comment" size={24} color="black" style={icons1}
            onPress={() => {
              setShowcomments(!showcomments)
            }}
          />
        </View>
      </View>
      {
        showcomments == true &&
        <View style={styles.section2}>
          {
            comments.map((item, index) => {
              return (
                <View style={styles.section2s1} key={item.id}>
                  <Text style={styles.commentUser}>{item.username}</Text>
                  <Text style={styles.commentText}>{item.comments}</Text>
                </View>
              )
            })
          }
        </View>
      }
    </View>
  )
}

export default PostCard

注意：使用react-native-gesture-handler时，你的根组件需要包裹在GestureHandlerRootView中，比如在App.js里：

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* 你的应用内容 */}
    </GestureHandlerRootView>
  );
}

内容的提问来源于stack exchange，提问作者user20731273