A smoothly drag to sort tags component for react-native. (iOS & Android)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Samples
android
ios
lib
readme_resources
LICENSE
README.md
app.json
index.js
package.json
yarn.lock

README.md

react-native-drag-to-sort-tags

react-native-drag-to-sort-tags 是一个可拖动排序的标签组件(iOS & Android),并且在安卓上做了性能优化,滑动的流畅度表现良好。

功能

  • 拖动标签排序
  • 在安卓上更好的性能表现,更流畅的滑动响应
  • 较完善的自定义功能
  • 支持单击选择以选中标签,标签自动排序
  • 支持屏幕旋转
  • 支持TypeScript

预览

Preview Preview

接入步骤

该项目依赖 react-native-gesture-handler, 在接入本库之前请先阅读react-native-gesture-handler接入文档正确接入react-native-gesture-handler

大概步骤就是:

yarn add react-native-gesture-handler
react-native link react-native-gesture-handler

如果不是是用native-navigation或者react-native-navigation则可以直接修改安卓代码

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

iOS则不用修改。

如果是使用native-navigation或者react-native-navigation,则需要修改JavaScript代码

import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
import { Navigation } from 'react-native-navigation';
import YourScreen from './YourScreen';

export function registerScreens() {
  Navigation.registerComponent('example.FirstTabScreen', () =>
    gestureHandlerRootHOC(YourScreen));
}

如此,react-native-gesture-handler就已经安装完成。

接下来安装react-native-drag-to-sort-tag:

$ npm install react-native-drag-to-sort-tag --save

如果需要长按后的震动反馈功能,安卓需要额外配置:在AndroidManifest.xml中添加下面的代码

<uses-permission android:name="android.permission.VIBRATE"/>

Usage

示例:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { DragToSortTags } from "react-native-drag-to-sort-tags";

export class DragToSortTagsSample extends React.Component{
  render() {
    const tags = [];
    for (let i = 0; i < 15; ++i) {
      tags.push("Tag " + i);
    }
    return (
      <View style={styles.container}>
        <DragToSortTags
          style={styles.container}
          tags={tags}
          renderTag={this._renderTag}
        />
      </View>
    );
  }

  _renderTag = (tag: string) => {
    return (
      <View style={styles.button}>
        <Text style={styles.text}>{tag}</Text>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:40,
    backgroundColor: "white"
  },
  button: {
    width: 100,
    height: 50,
    backgroundColor: "#F3F3F3",
    borderRadius: 5,
    justifyContent: "center",
    alignItems: "center"
  }
});

属性

属性 类型 默认值  作用  
tags string[] 必须 显示的所有标签
renderTag (tag: string) => React.ReactElement 必须 每个标签的render函数
marginHorizontal number 5 标签之间的横向间隔
marginVertical number 5 标签之间的纵向间隔
colorForSelected Color 'red' 标签单击后的选中背景颜色
opacityForDragged number 0.6 拖拽的标签的不透明度
onTagsSorted (tags: string[]) => any ()=>null 所有标签排序发生变动的时候的回调函数
fixBorderRadiusOnAndroid boolean true 是否启用修正react-native-gesture-handler在安卓上borderRadius单位错误的bug
selectable boolean true 标签是否可以单击选择
onSelectChange (selectedTags: string[]) => any ()=>null 选中标签或其顺序发生变化时的回调
maxCountSelectable number 0 最大可选择的标签数量(0表示无限制)
vibration number 40 长按时的震动反馈时长,<=0表示不震动(该功能在安卓上需要配置权限)
initSelectedTags string[] [] 初始化选中的标签
longPressResponseTime number 500 长按最小响应时长(毫秒)

方法:

getSortedTags(): string[];

获取已经当前所有标签的排序顺序

getSelectedTags(): string[];

获取当前选择的标签(已排序)

注意事项

  • vibration 在安卓上需要配置权限:在AndroidManifest.xml中添加下面的代码
<uses-permission android:name="android.permission.VIBRATE"/>
  • 有关 renderTag:

    1. 目前暂时只支持等宽且等高的标签元素。
    2. renderTag返回的顶层元素是没有实际意义的,最终会将其属性全部转化到一个可以支持同时手势的BaseButton上面。
    3. renderTag的顶层元素的样式中,margin系列值均无效,需要设置margin的话,请通过设置DragToSortTags的marginHorizontal和marginVertical属性
    4. renderTag的顶层元素的样式中,transform,ref,onLayout和zIndex属性均是无效的,该属性已经用于制作拖动动画
    5. BaseButton现行版本中存在一个bug:borderRadius在Android上单位错误,所以本库开启了一个修复选项fixBorderRadiusOnAndroid。如果react-native-gesture-handler在未来的版本修复了这个问题,您可以手动关闭这个修复功能。
    6. BaseButton现行版本borderWith无效