Code Monkey home page Code Monkey logo

react-native-cascade-picker's Introduction

react-native-cascade-picker

react-native 级联选择器

demo

introduction

  • 该组件使用两层叠加View组合一起实现滚动渐变动画
  • 顶层View作为遮罩层,垂直等分为5格,每格的颜色和透明度不一样,以此模拟渐变色效果
  • 底层View作为数据渲染层,根据选中项动态组装子项,目标是使选择器子项上下对称,选中项刚好居中显示
  • 滑动动画效果是基于PanResponderAnimated类实现。顶层View注册PanResponder并捕获滑动开始结束时手指的位移,然后根据此位移值动态更新底层Viewtop样式属性值

props

  • cancelText 取消按钮名称,默认是取消
  • confirmText 确认按钮名称,默认是确认
  • onCancel 取消按钮点击处理函数
  • onConfirm 确认按钮点击处理函数
  • itemHeight 选择器子项的高度,默认是 30
  • data 数据源
  • pickedValues 选中数组项

其中data属性格式需遵循如下格式:

[
  {
    text: "2019年",
    value: 2019,
    items: [
      {
        text: "1月",
        value: 1,
        items: [
            { text: "1日", value: 1 }, 
            { text: "2日", value: 2 }
        ]
      },
      {
        text: "2月",
        value: 2,
        items: [
            { text: "1日", value: 1 }, 
            { text: "2日", value: 2 }
        ]
      }
    ]
  }
];

其中pickedValues中的选中值是取自data中的value

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.