如何使用双击在React原生?我想,如果用户双击图像比setliked状态触发器,那么我怎么能在rn中做到这一点?像Instagram的帖子,是他们的任何预构建包在rn中让我这样做?我使用rn 0.70.5像我们有onpress,或任何其他方式来做到这一点?
import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState } 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)
return (
<View style={styles.container}>
<View style={styles.content}>
<Image source={{ uri: profileimg }} style={styles.profileImage} />
<Text style={styles.Username}>{username}</Text>
</View>
<Image source={{ uri: postimg }} style={styles.posts} /> // This is the post img
<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
4条答案
按热度按时间mkshixfv1#
您可以通过npm使用此库
react-native-double-tap
安装:下面是您可以操作或应用到建议中的代码
顺便说一下,这里有一个documentation的链接
o2gm4chl2#
嗨,您可以执行以下操作:
将您图像 Package 成可触摸的不透明或可触摸的无反馈
现在管理handledoubleTap如下:
如果您使用可触摸不透明度,则将activeOpacity设置为1:
n1bvdmb63#
要对图像使用双击,您可以使用React Native手势处理程序。它是一个为React Native提供类似于本机的手势处理的库。要使用它,您需要通过运行以下命令安装该库:
之后,您可以使用组件 Package Image组件并处理双击事件。当双击事件发生时,您可以更改'isliked'变量的状态。用于此操作的代码如下所示:
您可以在此处找到有关如何使用React本机手势处理程序的详细信息:https://kmagiera.github.io/react-native-gesture-handler/。
l3zydbqr4#
这是我测试过的双击的完整示例。