本文介绍了反应本机可滑动(滑动以删除)未关闭的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用来自React-Native-Gesture-Handler的Swipeable合并要在我的页面上删除的滑动.当我按Delete键时,联系人将被删除,但可滑动式保持打开状态.
I'm using Swipeable from React-Native-Gesture-Handler to incorporate swipe to delete on my page.When I press delete, the contact gets deleted however the swipeable remains open.
我希望它在按下后关闭,但我似乎不知道该怎么做.
I want it to close after it gets pressed but I can't seem to figure out how to do it.
这是我的代码:
const RightActions = (progress, dragX) => {
return (
<TouchableOpacity onPress={()=>{DeleteContact(i)}}>
<View style={[ContactsStyles.rightAction]}>
<Text style={ContactsStyles.actionText}>Delete</Text>
</View>
</TouchableOpacity>
)
}
这是我可滑动的地方:
<Swipeable renderRightActions={RightActions} >
<View style={ContactsStyles.UserContainer}>
<Text numberOfLines={1} style={[Fonts.Name]}> {obj.firstname} {obj.lastname} </Text>
{/* Message/Call Container */}
<View style={ContactsStyles.ImageCont}>
{/* Message */}
<TouchableOpacity onPress={() => Communications.text(obj.phone, 'Hey ' + obj.firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' + location)} >
<View style={ContactsStyles.ImageBox}>
<Image style={ContactsStyles.Image} source={require('../../assets/icons/message.png')} />
</View>
</TouchableOpacity>
{/* Call */}
<TouchableOpacity onPress = {() => Communications.phonecall( obj.phone , true)}>
<View style={ContactsStyles.ImageBox}>
<Image style={ContactsStyles.Image} source={require('../../assets/icons/phone.png')} />
</View>
</TouchableOpacity>
</View>
{/* End of Message/Call Container */}
</View>
</Swipeable>
推荐答案
您需要使用带有close方法的引用.
You need to use a reference which has a close method on it.
首先定义一个参考
const swipeableRef = useRef(null);
然后将其分配给Swipeable
then assign it to Swipeable
<Swipeable
ref={swipeableRef}
renderLeftActions={renderLeftActions}
onSwipeableLeftOpen={() => handleComplete(item)}
>
...
</Swipeable>
然后只需调用close方法
and then just call the close method
const closeSwipeable = () => {
swipeableRef.current.close();
}
请注意,对于多个可滑动输入,您应该具有多个裁判.
Note, for multiple Swipeables you should have multiple refs.
let row: Array<any> = [];
let prevOpenedRow;
renderItem ({ item, index }) {
return (
<Swipeable
ref={ref => row[index] = ref}
friction={2}
leftThreshold={80}
rightThreshold={40}
renderRightActions={renderRightActions}
containerStyle={style.swipeRowStyle}
onSwipeableOpen={closeRow(index)}
...
>
...
</Swipeable>);
}
closeRow(index) {
if (prevOpenedRow && prevOpenedRow !== row[index]) {
prevOpenedRow.close();
}
prevOpenedRow = row[index];
}
这篇关于反应本机可滑动(滑动以删除)未关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!