tm-rnkit-actionsheet-picker

    1.3.4 • Public • Published

    npm react-native MIT bitHound Score Downloads

    The best DatePicker and DataPicker for React Native.

    Support me with a Follow

    Getting Started

    First, cd to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command npm i -S rnkit-actionsheet-picker and link it manually (see below).

    iOS

    • ####React Native < 0.29 (Using rnpm)

      rnpm install rnkit-actionsheet-picker

    • ####React Native >= 0.29 $npm install -S rnkit-actionsheet-picker

      $react-native link rnkit-actionsheet-picker

    Manually

    1. Add node_modules/rnkit-actionsheet-picker/ios/RNKitASPickerView.xcodeproj to your xcode project, usually under the Libraries group
    2. Add libRNKitASPickerView.a (from Products under RNKitASPickerView.xcodeproj) to build target's Linked Frameworks and Libraries list

    Android

    • ####React Native < 0.29 (Using rnpm)

      rnpm install rnkit-actionsheet-picker

    • ####React Native >= 0.29 $npm install -S rnkit-actionsheet-picker

      $react-native link rnkit-actionsheet-picker

    Manually

    1. JDK 7+ is required
    2. Add the following snippet to your android/settings.gradle:
    include ':rnkit-actionsheet-picker'
    project(':rnkit-actionsheet-picker').projectDir = new File(rootProject.projectDir, '../node_modules/rnkit-actionsheet-picker/android/app')
     
    1. Declare the dependency in your android/app/build.gradle
    dependencies {
        ...
        compile project(':rnkit-actionsheet-picker')
    }
     
    1. Import import io.rnkit.actionsheetpicker.ASPickerViewPackage; and register it in your MainActivity (or equivalent, RN >= 0.32 MainApplication.java):
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.asList(
                new MainReactPackage(),
                new ASPickerViewPackage()
        );
    }

    Finally, you're good to go, feel free to require rnkit-actionsheet-picker in your JS files.

    Have fun! 🤘

    Basic Usage

    Import library

    import { DatePicker, DataPicker } from 'rnkit-actionsheet-picker';
    

    DatePicker

    DatePicker.show({
          onPickerConfirm: (selectedDate) => {
            console.log(selectedDate);
            this.setState({
              date: selectedDate
            })
          },
          onPickerCancel: () => {
            console.log('date picker canceled');
          },
          onPickerDidSelect: (selectedDate) => {
            console.log(selectedDate);
          }
        })
        

    Params

    Key Type Default Description
    titleText string '选择时间'
    titleTextColor string '#393939'
    doneText string '确定'
    doneTextColor string '#269ff7'
    cancelText string '选择时间'
    cancelTextColor string '#269ff7'
    minimumDate string '1900-01-01 00:00:00'
    maximumDate string '2222-12-12 23:59:59'
    selectedDate string
    datePickerMode string 'datetime' time、date、datetime
    onPickerConfirm Fun return selectedDate
    onPickerCancel Fun
    onPickerDidSelect Fun iOS only

    DataPicker

    DataPicker.show({
          // dataSource: ["男", "女"],
          // dataSource: [{"北京": ["123123", "ssssss"]}, {"广东省": ["深圳"]}],
          // dataSource: [{"北京": [{"北京x": ["123123", "ssssss"]}, {"北京xasdfasdf": ["123123", "ssssss"]}]},{"广东省": [{"深圳": ["福田区", "宝安区"]}]}],
          dataSource: require('./area.json'),
          defaultSelected: ["广东", '深圳市', '福田区'],
          numberOfComponents: 3,
          onPickerConfirm: (selectedData, selectedIndex) => {
            console.log(selectedData, selectedIndex);
            this.setState({
              data: JSON.stringify(selectedData) + ' -- ' + JSON.stringify(selectedIndex)
            })
          },
          onPickerCancel: () => {
            console.log('data picker canceled');
          },
          onPickerDidSelect: (selectedData, selectedIndex) => {
            console.log(selectedData, selectedIndex);
          }
        })
     

    Params

    Key Type Default Description
    titleText string '选择时间'
    titleTextColor string '#393939'
    doneText string '确定'
    doneTextColor string '#269ff7'
    cancelText string '选择时间'
    cancelTextColor string '#269ff7'
    yearText string '年' android only
    monthText string '月' android only
    dayText string '日' android only
    hoursText string '时' android only
    minutesText string '分' android only
    secondsText string '秒' android only
    wheelBgColor string '滚轮背景颜色' android only
    titleBgColor string '标题栏背景颜色'android only
    doneCancelSize int 17 '确定取消按钮大小'android only
    titleSize int 18 '标题文字大小'android only
    contentSize int 18 '内容文字大小'android only
    cancelEnabel boolean true '是否能取消'android only
    isCenterLable boolean true '是否只显示中间的label'android only
    outTextColor string '分割线以外的文字颜色'android only
    centerTextColor string '分割线之间的文字颜色'android only
    dividerColor string '分割线的颜色'android only
    shadeBgColor string '遮罩层背景色'android only
    lineSpacingMultiplier float 1.6f '条目间距倍数'android only
    dividerType string '分割线类型:fill or wrap'android only
    isCyclic boolean false '滚轮是否循环' android only
    numberOfComponents int 1
    dataSource array
    defaultSelected array
    onPickerConfirm Fun return selectedData、selectedIndex
    onPickerCancel Fun
    onPickerDidSelect Fun selectedData、selectedIndex (iOS only)

    Contribution

    Thanks

    @saiwu-bigkoo - Android-PickerView 仿iOS的PickerView控件,有时间选择和选项选择并支持一二三级联动效果 @skywinder - ActionSheetPicker-3.0 Quickly reproduce the dropdown UIPickerView / ActionSheet functionality on iOS.

    Questions

    Feel free to contact me or create an issue

    made with ♥

    Install

    npm i tm-rnkit-actionsheet-picker

    DownloadsWeekly Downloads

    9

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    233 kB

    Total Files

    41

    Last publish

    Collaborators

    • nuaalrb