RN PickerView组件

pickerView多滚轮选中组件

1、功能说明

页面底部弹出的半屏滚轮选择弹窗

目前仅支持到双滚轮，三滚轮的后期再扩展

2、组件效果

单滚轮

双滚轮

3、数据格式

单滚轮数据
{option: [{text: "双轴",value: "685908"},{text: "三轴",value: "685909"},{text: "其他",value: "685932"}],paramname: "zhoushu",//参数名title: "轴数"
}双滚轮数据
{option: [{isparent: true,option: [{isparent: false,paramname: "shangpaiyuefen",text: "1",value: "515681"},{isparent: false,paramname: "shangpaiyuefen",text: "2",value: "515682"}],paramname: "shangpainian",text: "2017年",value: "2017"},{isparent: true,option: [{isparent: false,paramname: "shangpaiyuefen",text: "10",value: "515690"},{isparent: false,paramname: "shangpaiyuefen",text: "11",value: "515691"},{isparent: false,paramname: "shangpaiyuefen",text: "12",value: "515692"}],paramname: "shangpainian",text: "2016年",value: "2016"}],paramname: "buytime",title: "出厂年限"
}

4、代码演示

/*** @description 单滚轮* @author gongchenghui* @version 2018.11.05*/
import React, { Component } from "react";
import {StyleSheet,Text,ScrollView,Image,Alert,TextInput,View,TouchableOpacity,TouchableHighlight,Dimensions
} from "react-native";
import { PickerView } from "rn-design";
const styles = StyleSheet.create({okText: {color: "#dc4931"},dismissText: {color: "#434345"},title: {fontSize: 16,color: "#999"},button: {borderWidth: 1,borderColor: "red",padding: 5,width: 100}
});
const pickerData = {lettersort: false,option: [{text: "双轴",value: "685908"},{text: "三轴",value: "685909"},{text: "其他",value: "685932"}],paramid: 12286,paramname: "zhoushu",title: "轴数",viewtype: "1"
};export default class Demo extends Component {constructor(props) {super(props);this.state = {};}setPickerData = (value) => {// console.log(value);};render() {return (<View style={styles.flex}><PickerViewdata={pickerData}onChange={(item) => this.setPickerData(item)}okText={<Text style={styles.okText}>确定</Text>}dismissText={<Text style={styles.dismissText}>取消</Text>}title={<Text style={styles.title}>请选择时间</Text>}><TouchableHighlightactiveOpacity={0.5}style={[styles.button]}underlayColor="#a9d9d4"><Text>show popup</Text></TouchableHighlight></PickerView></View>);}
}

5、API

参数	说明	类型	默认值
data	pickerView展示数据	object	无
title	pickerView标题如果传入的是 React.ReactElement一定要自定义样式，否则不会继承组件设置的默认样式	string\React.ReactElement	请选择
okText	pickerView确定按钮文案	string\React.ReactElement	确定
dismissText	pickerView关闭按钮文案	string\React.ReactElement	取消
styles	pickerView弹窗样式（已添加弹窗样式，此参数谨慎使用）	StyleSheet.create	-
itemStyle	pickerView滚轮字体设置	StyleSheet.create	{ color: “#333”, fontSIze: 18 }
onSelectChange	pickerView选中结果回调结果示例： [{“text”:“双轴”,“value”:“685908”, “paramname”:“zhoushu”}] [ {“isparent”:true, “paramname”:“cjshijian”, “text”:“2017”,“value”:“2017”}, {“isparent”:false, “paramname”:“cjshijian_month”, “text”:“7”,“value”:“7”}]	function	无

注：组件调用时，把需要点击的DOM模块包裹在PickerView标签里面

源码地址

RN PickerView组件相关推荐

RN自定义组件封装 - 播放类似PPT动画
1. 前言近日,被安排做一个开场动画的任务.虽然RN提供了Animated来自定义动画,但是本次动画中的元素颇多,交互甚烦...在完成任务的同时,发现很多步骤其实是重复的,于是封装了一个小组件记录一 ...
RN FlatList组件
长列表或者无限下拉列表是最常见的应用场景之一.RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧.而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要 ...
RN子组件获取redux数据
一.可以用Provider组件包起要用redux数据的组件,传给他store <Provider store={store}><App/><Index/> < ...
rn 函数式组件获取子组件的实例
class式组件要获取子组件的实例只要用ref就可以了,但是函数式组件就要复杂一点函数式组件要给子组件直接绑定ref是不成功的,要求子组件使用forward创建才可以,如下 const ChildR ...
RN图表组件react-native-charts-wrapper
文章目录组件安装组件使用组件属性一. 散点图组件(ScatterChart) 二. 饼图组件(PieChart) 三. 折线图组件(LineChart) 五. 柱状图(BarChart) 支持 ...
RN ScrollView组件
ScrollView组件允许用户左.右或者上.下滑动来查看原来显示在屏幕外的内容一.ScrollView组件常用属性 1.horizontal:布尔类型属性,当他为true时,ScrollView的 ...
rn 开关组件Switch
1.引入import { View, Switch, StyleSheet } from "react-native";2.使用<SwitchtrackColor={{ fa ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...
React Native 下载组件以及npm常用命令
一.React Native 下载组件: RN的组件都是需要从网上下载的.正常来说,我们通过npm start打开服务器之后,直接用npm下载即可.常用的组件,例如按钮,滚动等,都是可以直接下载的.下 ...

RN PickerView组件

pickerView多滚轮选中组件

1、功能说明

2、组件效果

单滚轮

双滚轮

3、数据格式

4、代码演示

5、API

RN PickerView组件相关推荐

最新文章

热门文章