0

我正在对 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;

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

谢谢。

4

2 回答 2

0

我很确定当 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

于 2021-03-31T21:27:32.150 回答
0

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

于 2020-11-24T13:13:33.743 回答