使用 Pressable React Native 组件时的延迟样式显示答案

【问题标题】：Delay style display when using Pressable React Native component使用 Pressable React Native 组件时的延迟样式显示
【发布时间】：2020-11-24 12:47:35
【问题描述】：

我正在为 FlatList 中显示的项目使用 Pressable React Native 组件。我希望能够在列表中来回滚动并且没有来自项目的反馈，除非按下一会儿。

onPress 调用的函数很容易被onLongPress 功能延迟，但是我还想在项目被按下一段时间后调用不透明度，而不是在滚动期间。似乎没有一种简单的方法可以做到这一点。到目前为止我尝试过的都没有成功：

.........

const sleep = (milliseconds: any) => {
   return new Promise(resolve => setTimeout(resolve, milliseconds));
};

const display = (pressed: boolean) => {
   if (pressed) {
      sleep(3000).then(() => {
         return true;
      });
   }
   return false;
};

const ItemInList: FunctionComponent<ItemInListProps> = ({
   style,
   colors,
   title = '',
   text,
   subtext,
   children,
   onPress,
}) => {
   return (
      <Pressable
         onLongPress={onPress}
         delayLongPress={3000}
         style={({ pressed }) => [
            {
               opacity: display(pressed) ? 0.2 : 1,
            },
         ]}>
         <LinearGradient
            colors={colors || []}
            style={StyleSheet.flatten([styles.container, style])}>
            <View style={styles.titleContainer}>
               <Text style={styles.titleStyle}>{title}</Text>
            </View>
            <View style={subtext ? styles.subtextContainer : styles.textContainer}>
               <Text style={styles.textStyle}>{text}</Text>
            </View>
            {subtext && (
               <View style={styles.subtextContainer}>
                  <Text style={styles.subtextStyle}>{subtext}</Text>
               </View>
            )}
            {children}
         </LinearGradient>
      </Pressable>
   );
};

export default ItemInList;

这没有任何效果，永远不会显示不透明度。有没有人知道如何处理这个问题？

谢谢。

【问题讨论】：

标签： javascript react-native react-native-flatlist pressable

【解决方案1】：

你能试试TouchableOpacity吗？它有道具delayPressIn 和许多道具你可以试试这些

【讨论】：

这似乎有同样的问题，即仅适用于被调用的函数 - 而不是延迟不透明度。
有一个函数setOpacityTo 。你试过这个吗？
似乎不再起作用，TouchableOpacity 即将被弃用：github.com/facebook/react-native/issues/29272

【解决方案2】：

我很确定当 OP 提出这个问题时，没有直接的解决方案。现在您可以使用“unstable_pressDelay”提供的道具来定义延迟可按下激活的毫秒数。

示例代码：

  <Pressable
    unstable_pressDelay={5000}
    onPress={() => {
      setTimesPressed((current) => current + 1);
    }}
    style={({ pressed }) => [
      {
        backgroundColor: pressed
          ? 'rgb(210, 230, 255)'
          : 'white'
      },
      styles.wrapperCustom
    ]}>
    {({ pressed }) => (
      <Text style={styles.text}>
        {pressed ? 'Pressed!' : 'Press Me'}
      </Text>
    )}
  </Pressable>

文档：https://reactnative.dev/docs/pressable#unstable_pressdelay

【讨论】：