Picker组件封装
在开发APP的过程中,我们可能会遇上软件中需要有很多下拉选择样式,就像之前我做的那个《房贷计算器》一样,有很多下拉选择,如果没有将Picker封装起来共用是很麻烦的。
安装插件
在React Native里这个组件叫Picker,目前(React Native0.25.1版本)来说,自带的Picker并不能很好的适应iOS和Android,所以在此借助第三方的插件:react-native-picker
安装插件命令:npm install --save react-native-picker
picker组件
该插件有哪些具体的参数与方法查看官方文档:https://github.com/beefe/react-native-picker
在该js文件中,主要是picker的定义;
picker有show()方法,经过某个触发事件后执行,将picker展示出来给用户进行选择
picker展示时,还需要将当前的值和供选择的值都传值过来
export default class PickerModal extends React.Component { constructor(props) {
super(props); this.state = {
options: [0],
currentOption: 0
}
} show(options, currentOption) {
this.setState({options, currentOption});
this.picker.show(); return new Promise(
(resolve, reject)=> {
this.resolve = resolve;
this.reject = reject;
}
);
} render() {
return (
<Picker
ref={(picker)=>{this.picker = picker;}}
style={{position:'absolute', left:0, right:0, bottom:0, height: 270, backgroundColor:'#fff'}}
showMask={true}
pickerBtnText="确定"
pickerCancelBtnText="取消"
pickerBtnStyle={{color:'#000'}}
pickerData={this.state.options}
selectedValue={[this.state.currentOption]}
onPickerDone={(value)=>{ this.picker.hide(); this.resolve && this.resolve(value[0]); }}
onPickerCancel={()=>{ this.picker.hide(); this.reject && this.reject(); }}
/>
)
}
}
picker-field组件
该js是 通过接受值来设计样式显示在页面上,当点击后,即可将上述的picker组件展示出来给用户选择;
export default class PickerField extends React.Component {
showPickerModal() {
let { options, value } = this.props; global.pickerModal.show(options, value).then(
(newValue)=> {
this.props.onValueChange(newValue);
},
(e)=> {
console.log(e)
}
)
} render() {
let { title, value } = this.props; return (
<View style={{flex:1}}>
<View
style={{flexDirection:'row', alignItems:'center', height:47, borderBottomWidth:1, borderBottomColor:'#2b3138'}}>
<Text style={{flex:2, fontSize:16, color:'#c9c8c9'}}>{title}</Text> <TouchableOpacity style={{flexDirection:'row', flex:2.1, alignItems:'center'}}
onPress={()=>this.showPickerModal()}>
<Text style={{color:'#50c0ce', fontSize:16}}>{value}</Text> <Text style={{flex:1, textAlign:'right'}}>
<Icon style={{color:'#c9c8c9'}} name="ios-arrow-down" size={26}/>
</Text>
</TouchableOpacity> </View>
</View>
)
}
}
在文件中有一个global.pickerModal,这个是需要我们在一个外层文件或公共文件中定义的:
<PickerModal ref={(pickerModal)=>{global.pickerModal = pickerModal;}}/>
给picker-field组件传值
在需要的位置中将PickerField显示出来:
<PickerField title="计算方式" value={this.state.calMethod}
onValueChange={(value)=>this.setState({calMethod:value})}
options={['贷款金额','住房面积']}/>
具体的显示样式可以在picker-field组件那个js文件中修改,传值不同需要在显示的时候进行属性修改。
Picker组件封装的更多相关文章
- picker(级联)组件及组件封装经验
组件封装的几个经验 a.参数:最佳方式,仅一个object参数,所需要的实际参数,作为对象属性传入. 如此,便于数据的处理和扩展.例如,后期扩展需要增加参数,或者调整参数时,如果使用的对象传入,老的调 ...
- Picker 组件的设计与实现
前言 今天的主题是 Picker 组件的设计与实现,Picker 组件是 NutUI 的一个拾取器组件,它用于显示一系列的值集合,用户可以滚动选择集合中一项,也可以支持多个系列的值集合供用户分别选择. ...
- Vuejs 页面的区域化与组件封装
组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
- 微信小程序picker组件关于objectArray数据类型绑定
一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...
- 用mint-ui picker组件 实现省市区三级联动
公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...
- Vue + Element UI 实现权限管理系统 (功能组件封装)
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Linux组件封装(五)一个生产者消费者问题示例
生产者消费者问题是计算机中一类重要的模型,主要描述的是:生产者往缓冲区中放入产品.消费者取走产品.生产者和消费者指的可以是线程也可以是进程. 生产者消费者问题的难点在于: 为了缓冲区数据的安全性,一次 ...
随机推荐
- 待整理 - Linux 下的VI命令大全
http://www.cnblogs.com/88999660/articles/1581524.html
- hdu 3397 Sequence operation(很有意思的线段树题)
Sequence operation Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- [转]Kerberos简介
Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...
- openNebula 模板实例化成虚拟机【参数名为VM_NAME】
{ "action": { "perform": "instantiate", "params": { "vm ...
- C++的优秀特性6:智能指针
(转载请注明原创于潘多拉盒子) 智能指针(Smart Pointer)是C++非常重要的特性.考虑如下一段使用简单指针(Plain Pointer)的代码: A* a = new A(); B* b ...
- Codefoces 429 D. Tricky Function
裸的近期点对.... D. Tricky Function time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- Microsoft SQL Server 2008 基本安装说明
Microsoft SQL Server 2008 基本安装说明 安装SQL2008的过程与SQL2005的程序基本一样,只不过在安装的过程中部分选项有所改变,当然如果只熟悉SQL2000安装的同志来 ...
- 理解MVVM模式
1.WPF的核心是数据绑定. 2.考虑这样一个场景:界面上有一个TextBox显示Person的年龄,一个Button,点击一次Button,年龄加1. 3.做一个View,上面有TextBox和Bu ...
- Codeforces Round #181 (Div. 2) B. Coach 带权并查集
B. Coach 题目连接: http://www.codeforces.com/contest/300/problem/A Description A programming coach has n ...
- codeforces Gym 100187A A. Potion of Immortality
A. Potion of Immortality Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1001 ...