1

在我的 react-native 项目中，当 LongPressGestureHandler 的状态变为 END | 时，我尝试使用回调 失败 | 取消。此回调的函数使用我作为道具接收的全局变量反应。即使在此道具更新后。该功能以某种方式使用旧的反应。如果您能解释我做错了什么，我将非常感激。

`

import React, { useState, useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
import { Vibration, View, Text } from 'react-native';
import Animated from 'react-native-reanimated';
import { useGestureHandler } from 'react-native-redash';
import useReaction from '../../../../../../services/dashboard/feed/components/reaction/api';
import assets from '../../../../../../assets';
import styles from './styles';

const {
  Value, useCode, block, eq, call, onChange, cond, and, or, set
} = Animated;

export default ({
  reactions,
  emoji,
  componentRefetch,
  loggedInUsersId,
  itemId,
  counts,
}) => {
  const { navigate } = useNavigation();
  const [giveReaction, giveUnReaction] = useReaction(componentRefetch);

  const reacted = reactions.find(
    (reaction) => (reaction.user ? reaction.user.id === loggedInUsersId : false)
      && reaction.emoji === emoji
  );

  const [popAnim] = useState(new Value(1));

  const onEmojiPress = async () => {
    console.log('Emoji Pressed');
    console.log(reactions.length);
    if (reacted) {
      await giveUnReaction(itemId, emoji, reacted.id);
    } else {
      await giveReaction(itemId, emoji);
    }
  };

  const onEmojiLongPress = () => {
    console.log('Emoji long Pressed');
    Vibration.vibrate(1);
    navigate(assets.strings.dashboard.feeds.reactantsPopup.NAME, {
      reactions,
      emoji,
    });
  };

  const longPressState = new Value(State.UNDETERMINED);
  const longPressGestureHandler = useGestureHandler({ state: longPressState });

  const shouldScale = new Value(-1);

  useCode(
    () => block([
      cond(
        eq(longPressState, State.BEGAN),
        set(shouldScale, 1)
      ),
      cond(
        eq(longPressState, State.FAILED),
        call([], onEmojiPress)
      ),
      cond(
        or(
          eq(longPressState, State.CANCELLED),
          eq(longPressState, State.END),
        ),
        call([], onEmojiLongPress)
      ),
    ]),
    []
  );

  return (
    <LongPressGestureHandler {...longPressGestureHandler} minDurationMs={100}>
      <Animated.View
        style={{
          ...styles.icon,
          borderColor: reacted
            ? assets.colors.appDefaults.primaryColor
            : '#eeeeee',
          backgroundColor: reacted
            ? assets.colors.appDefaults.primaryColorLight
            : '#eeeeee',
        }}
      >
        <Animated.View
          style={{
            transform: [
              { scale: popAnim },
              {
                translateY: popAnim.interpolate({
                  inputRange: [1, 1.3],
                  outputRange: [0, -2],
                }),
              },
            ],
          }}
        >
          <Text
            style={{
              color: reacted ? assets.colors.appDefaults.primaryColor : 'black',
            }}
          >
            {`${emoji ?? ''} `}
          </Text>
        </Animated.View>
        <Text
          style={{
            color: reacted ? assets.colors.appDefaults.primaryColor : 'black',
          }}
        >
          {`${counts[emoji]}`}
        </Text>
      </Animated.View>
    </LongPressGestureHandler>
  );
};

`

4

1 回答 1

1

我发现（通过实验）useCode 向本机端发送了一组指令，为了将指令集更改为最新的道具更新，我们需要在道具更新时触发 useCode。

useCode(, [dependencyThatGetsUpdated])
于 2020-05-20T04:42:13.460 回答