react-slidepicker

React Native 版本- > react-native-slidepicker

react-slidepicker

Document

用于移动端的React选择器组件，使用TypeScript完成

自定义条目高度，背景色，文字样式，自定义选择器头部
支持使用级联选择和平行选择两种方式
自定义显示方式，可在 Modal 或绝对定位中使用

使用

安装:

npm install react-slidepicker

使用yarn :

yarn add react-slidepicker

引入:

//Cascade data
import { CascadePicker } from "react-slidepicker";

//Parallel data
import { ParallelPicker } from "react-slidepicker";

如果需要带有弹出层，使用withModal:

import { withModal, parallelPicker } from "react-slidepicker";
const ModalParPicker = withModal(ParallelPicker);

例子

import { CascadePicker, withModal } from "../react-slidepicker/index.ts";
import Data from "./json/slidethree.json";

const ModalCasPicker = withModal(CascadePicker);

export default function App() {
  const [showName, setShowName] = useState(0);
  return (
    <div>
      <ModalCasPicker
        confirm={(arr) => {...}}
        cancel={() => setShowName(0)}
        show={showName === 1}
        dataSource={Data}
        pickerDeep={3}
        pickerStyle={{...}}
        headOptions={{ borderTopRadius: 10, backgroundColor: "#fff" }}
      >
        <span onClick={() => setShowName(1)}>选择地区</span>
      </ModalCasPicker>
....

属性 (props)

show
dataSource
pickerDeep
confirm
cancel
pickerStyle
headOptions
customHead

`show : boolean`

表示是否显示Modal，如果使用了widthModal，就需要指定这个属性。

`dataSource : array`

必须，选择器的数据源。

name 和list 是数据源的关键字 , name 会显示在组件中, list 是子列表数据。

数据源的格式

`pickerDeep : number`

用于嵌套级联的选择器中，表示选择器的层级，在级联选择器中必须。

`confirm : (dataArray) => { }`

如果没有使用customHead，那么就应该指定这个函数用作 确认 按钮的点击事件，用于接收确认选择的结果，返回一个结果数组。

`cancel : () => { }`

如果没有使用customHead，那么就应该指定这个函数，用于 取消 按钮的点击事件。

`pickerStyle : object`

选择器的样式属性，可以指定如下属性：

Key	Type	Default Value	Description
itemHeight	number	40	每一项的高度
visibleNum	number	5	显示的行数
activeBgColor	string (color)	"#FFF"	选中项的背景色
activeBgOpacity	number	1	选中项的背景透明度
activeFontSize	Number	18	选中项的字体大小
activeFontColor	string (color)	"#F00"	选中项的字体颜色
normalBgColor	string (color)	"#FFF"	未选中项的背景色
normalBgOpacity	number (0-1)	0.4	未选中项的背景透明度
normalFontSize	number	16	未选中项的字体大小
normalFontColor	string：(color)	"#333"	未选中项的字体颜色

`headOptions : object`

头部配置，文字和样式。接收如下属性

key	Type	Default Value	Description
confirmText	string	Confirm	确认按钮文本
cancelText	string	Cancel	取消按钮文本
headHeight	number	50	头部高度
borderTopRadius	number	0	头部的顶部圆角
backgroundColor	string(color)	#fff	背景色
confirmStyle	object (style)	{padding: '10px'}	确认按钮文本样式
cancelStyle	object (style)	{padding: '10px'}	取消按钮文本样式

`customHead : view`

自定义头部，即滑动选择块上面的一部分内容，非必要参数。自定义头部会替换掉默认的包含「确认」，「取消」按钮的 View。

如果你需要在自定义的头部 View 中通过点击事件获取到结果，即达到「确认」按钮的效果，那就需要给当前picker组件指定一个 Ref，再通过getResult方法得到结果，详情参考下面的getResult方法

方法

如果你使用了自定义头部，且包含了「确认」「取消」按钮，那么就需要为 picker 组件设置 ref。然后将 ref 上的方法绑定到你的确事件上才能获取到选择结果。

`getResult()`

除非你使用自定义头部，否则都应该使用 confirm 方法表示选定，而不是使用这个方法。

通过设置ref，可以实时获取到已选择的数据，如下：

export default function App() {
  const [showName, setShowName] = useState(0);
  const pickerRef = useRef();
  return(
    <ModalParPicker
        ref={pickerRef}
        show={showName === 2}
        dataSource={Spec})
        ...
         customHead={
          <MyHead
            confirm={() => {
              const data = pickerRef.current.getResult();
              console.info("data2", data);
              setShowName(0);
            }}
          />
        }
    </ModalCasPicker>

实验性功能

`onceChange : (dataArray) => { }`

每次选择改变发生都会执行，返回当前的实时结果。

`defaultValueIndexes`

默认选中值，待完善

其他

数据源格式

级联数据:

[
  {
    "name": "Asia",
    "id": 1,
    "list": [
      {
        "name": "China",
        "id": 100,
        "list": [
          {
            "name": "Beijing",
            "id": 1101
          }
        ]
      },
      {
        "name": "South Korea",
        "id": 200,
        "list": []
      }
    ]
  }
]

平行数据 ( 一个二维数组 ):

[
  [
    {
      "name": "2015",
      "id": 11
    }
  ],
  [
    {
      "name": "july",
      "id": 201
    },
    {
      "name": "August",
      "id": 202
    }
  ],
  [
    {
      "name": "1st",
      "id": 2101
    }
  ]
]

react-slidepicker