Page 1 of 1

RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 25日 16:09
by Magnum

问题描述如下:
项目需要用到拖拽列表组件,如iOS的UITableView可以拖拽移动item更改item下标。
目前RN有react-native-draggable-flatlist比较接近需求,但该组件需要依赖react-native-reanimated。直接安装react-native-draggable-flatlist运行工程提示react-native-reanimated版本太旧,估计和涂鸦组件限定react-native-reanimated的版本为1.9.0有关。
想问下大佬们有无其他好用的组件推荐且不与涂鸦组件冲突,或者有无方法解决冲突的问题?


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 25日 16:27
by xuanyi

可使用2.5.5及以下版本尝试
https://github.com/computerjazz/react-n ... ckage.json


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 25日 17:46
by Magnum

试了2.5.5版本,安装运行工程正常,用demo代码验证效果,iOS有正常拖拽更换效果,android有选中item变红色效果,但无拖拽效果。和自己之前参考技术博客写的情况类似,android无法响应手势。


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 28日 14:56
by Magnum

刷新下,希望有大佬可以指点迷津。


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 29日 11:03
by xuanyi

"react-native-draggable-flatlist": "2.5.4",
"react-native-reanimated": "1.9.0",

尝试下这个组合


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 29日 11:10
by xuanyi

还不行的话,尝试下这个组件

<DragOrderFlatlist
data={showList}
isOrder={true}
icon={icons.menu}
iconSize={convertX(20)}
ItemSeparatorComponent={() => (
<Divider
height={StyleSheet.hairlineWidth}
color={theme.divider}
style={{ marginBottom: StyleSheet.hairlineWidth }}
/>
)}
iconColor="#BFBFBF"
itemHeight={70}
onOrder={handleSort}
keyExtractor={(item: { healthCode: any }, index: any) => item.healthCode} // FlatList作用一样,优化
renderItem={renderShowItem}
/>


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Nov 30日 15:31
by Magnum
xuanyi 2022年 Nov 29日 11:10

还不行的话,尝试下这个组件

<DragOrderFlatlist
data={showList}
isOrder={true}
icon={icons.menu}
iconSize={convertX(20)}
ItemSeparatorComponent={() => (
<Divider
height={StyleSheet.hairlineWidth}
color={theme.divider}
style={{ marginBottom: StyleSheet.hairlineWidth }}
/>
)}
iconColor="#BFBFBF"
itemHeight={70}
onOrder={handleSort}
keyExtractor={(item: { healthCode: any }, index: any) => item.healthCode} // FlatList作用一样,优化
renderItem={renderShowItem}
/>

大佬能否给下具体使用实例?如data、onOrder、renderItem等参数的设置?多谢大佬🙏


Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?

Posted: 2022年 Dec 1日 11:18
by xuanyi

onOrder 就是调用了 Array.sort 方法去做个排序,根据需求来搞就可以了。
renderItem 已传。 data 根据renderItem 来处理