问题描述如下:
项目需要用到拖拽列表组件,如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有关。
想问下大佬们有无其他好用的组件推荐且不与涂鸦组件冲突,或者有无方法解决冲突的问题?
RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
Tags:
Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
试了2.5.5版本,安装运行工程正常,用demo代码验证效果,iOS有正常拖拽更换效果,android有选中item变红色效果,但无拖拽效果。和自己之前参考技术博客写的情况类似,android无法响应手势。
Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
刷新下,希望有大佬可以指点迷津。
Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
"react-native-draggable-flatlist": "2.5.4",
"react-native-reanimated": "1.9.0",
尝试下这个组合
Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
还不行的话,尝试下这个组件
<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}
/>
- Attachments
-
- drag-order-flatlist.zip
- (4.13 KiB) Downloaded 236 times
Re: RN的react-native-draggable-flatlist与涂鸦组件有冲突怎么解决?
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与涂鸦组件有冲突怎么解决?
onOrder 就是调用了 Array.sort 方法去做个排序,根据需求来搞就可以了。
renderItem 已传。 data 根据renderItem 来处理
- Attachments
-
- DragItem.tsx.zip
- (1.37 KiB) Downloaded 216 times