如何在react native中使用双击?

2wnc66cl  于 2022-12-14  发布在  React
关注(0)|答案(4)|浏览(234)

如何使用双击在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
mkshixfv

mkshixfv1#

您可以通过npm使用此库react-native-double-tap安装:

npm install --save react-native-double-tap

下面是您可以操作或应用到建议中的代码

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <DoubleClick
          singleTap={() => {
            console.log("single tap");
          }}
          doubleTap={() => {
            console.log("double tap");
          }}
          delay={200}
        >
          <Text>Open up App.js to start working on your app!</Text>
          <Text>Changes you make will automatically reload.</Text>
          <Text>Shake your phone to open the developer menu.</Text>
        </DoubleClick>
      </View>
    );
  }
}

顺便说一下,这里有一个documentation的链接

o2gm4chl

o2gm4chl2#

嗨,您可以执行以下操作:
将您图像 Package 成可触摸的不透明或可触摸的无反馈

<TouchableWithoutFeedback onPress={handleDoubleTap}>
   <Image source={{ uri: postimg }} style={styles.posts} /> 
</TouchableWithoutFeedback>

现在管理handledoubleTap如下:

var lastTap = null
 const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
        setIsliked(!isLiked)
    } else {
       lastTap = now;
    }
  }

如果您使用可触摸不透明度,则将activeOpacity设置为1:

<TouchableOpacity 
   onPress={handleDoubleTap} 
   activeOpacity={1}>
   <Image source={{ uri: postimg }} style={styles.posts} /> 
</TouchableOpacity>
n1bvdmb6

n1bvdmb63#

要对图像使用双击,您可以使用React Native手势处理程序。它是一个为React Native提供类似于本机的手势处理的库。要使用它,您需要通过运行以下命令安装该库:

npm install --save react-native-gesture-handler

之后,您可以使用组件 Package Image组件并处理双击事件。当双击事件发生时,您可以更改'isliked'变量的状态。用于此操作的代码如下所示:

function handleStateChange(event) {
    if (event.nativeEvent.state === State.ACTIVE) {
        setIsliked(true)
    }
}

...

<GestureHandler numberOfTaps={2} onHandlerStateChange={handleStateChange}>
    <Image source={{ uri: postimg }} style={styles.posts} /> 
</GestureHandler>

您可以在此处找到有关如何使用React本机手势处理程序的详细信息:https://kmagiera.github.io/react-native-gesture-handler/

l3zydbqr

l3zydbqr4#

这是我测试过的双击的完整示例。

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);
 // const [lastTap,setLastTap] =useState(null)
 var lastTap = null
 const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
       setCount(count+1)
    } else {
       lastTap = now;
    }
  }
  
  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        activeOpacity={1}
        style={styles.button}
        onPress={handleDoubleTap}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

相关问题