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

Question

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

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

.........
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;

这没有任何影响，从不显示不透明度。有人知道如何处理这个问题吗？

谢谢。

Answer 1

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

Answer 2

我敢肯定，当OP问这个问题时，没有直接的解决方案。现在您可以使用"；不稳定_压力延迟"；提供了道具来定义延迟可按下激活的毫秒数。

示例代码：

<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