这里是只有苹果的,如果想适配andorid,可以在showPickerFun方法里面使用platefrom判断

代码:

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity, Picker
} from 'react-native'; var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get("window"); export default class MyApp extends Component { constructor(props) {
super(props);
this.state = {
language: "i",//默认选择的
position: "0",//第几个
showpicker: false,//是否显示picker
surePicker:''//点击确定选择的value
}
} showPickerFun() {
if (this.state.showpicker) {
return <View style={{position: "absolute", bottom: 0, left: 0, backgroundColor: '#0000ff'}}>
<View style={styles.pickerTop}>
<TouchableOpacity onPress={() => this.setState({showpicker: false})}>
<Text>取消</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({showpicker:false,surePicker:this.state.language})}>
<Text>确认</Text>
</TouchableOpacity>
</View>
<Picker
selectedValue={this.state.language}
style={{height: 200, width: width}}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue, position: itemIndex})}>
<Picker.Item label="1" value="a" itemStyle={styles.itemStyle}/>
<Picker.Item label="2" value="b"/>
<Picker.Item label="3" value="c"/>
<Picker.Item label="4" value="d"/>
<Picker.Item label="5" value="e"/>
<Picker.Item label="6" value="f"/>
<Picker.Item label="7" value="g"/>
<Picker.Item label="8" value="h"/>
<Picker.Item label="9" value="i"/>
</Picker>
</View>
} else {
return null
}
} render() {
return (
<View style={styles.wrapper}>
<TouchableOpacity onPress={() => this.setState({showpicker: true})}>
<Text>show or hide Picker</Text>
</TouchableOpacity>
{this.showPickerFun()}
<Text style={{marginTop: 20}}>onValueChange事件:{this.state.language}:{this.state.position}</Text>
<Text style={{marginTop: 20}}>点击确定的value:{this.state.surePicker}</Text>
</View>
)
}
} const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
itemStyle: {
width: 100, height: 50,
fontSize: 25,
},
pickerTop: {
height: 34,
justifyContent: 'space-between',//分布方式
flexDirection: 'row',//横向布局
alignItems: 'center',//侧轴居中
paddingLeft: 5,
paddingRight: 5 } });

RN picker使用的更多相关文章

  1. RN组件之Switch与Picker

    一.Switch选择开关控件 1.该组件为Android/IOS通用的两种状态的开关组件 2.属性方法 (1)disabled bool:如果该值为true,用户就无法点击switch开关,默认为fa ...

  2. RN组件备忘录

    1:ActivityIndicator:圆形的loading提示符号. 2:Button:按钮 3:FlatList:高性能列表组件,支持下拉刷新. 4:Image:图片组件,能显示 网络图片.静态资 ...

  3. 颜色采集器colpick Color Picker

    简单 RGB.HSB.十六进制颜色选取器 jQuery 插件. 非常直观类似 Photoshop 的界面. 光明和黑暗很容易自定义 CSS3 外观. 28 KB 总由浏览器加载看起来不错甚至在 IE7 ...

  4. RN安卓原生模块

    https://facebook.github.io/react-native/docs/native-modules-android.html RN实际就是依附在原生平台上,把各种各样的RN组件展示 ...

  5. [RN] React Native 使用 阿里 ant-design

    React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...

  6. 一款轻阅读应用ReadIT,记录我的RN躺坑之旅

    背景 一款轻阅读应用ReadIT,支持功能:优质文章推送.评论点赞.计划制定.计划闹钟.天气预报.收藏文章.深浅两套主题.多语言切换.极光推送等功能.后续还会继续集成功能.前后端均自主研发,借鉴市面较 ...

  7. 基于RN开发的一款视频配音APP(开源)

    在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...

  8. iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  9. 16款最佳的 jQuery Time Picker 时间选择插件

    jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...

随机推荐

  1. Unity3D中Layers和LayerMask解析

    Unity中是用int32来表示32个Layer层.int32表示二进制一共有32位(0—31).在Unity中可编辑的Layer如下图所示:   在Unity中每个GameObject都有Layer ...

  2. 19迭代模式Iterator

    一.什么是迭代模式 Iterator模式也叫迭代模式,是行为模式之 一,它把对容器中包含的内部对象的访问委让给 外部类,使用Iterator(遍历)按顺序进行遍历 访问的设计模式. 二.不使用迭代模式 ...

  3. Nginx-介绍nginx的两篇博客

    1. 一篇博客1.1)文章中间介绍配置文件的结构1.2)文章末尾可设置拒绝的ip,允许的ip博客地址:http://www.cnblogs.com/knowledgesea/p/5175711.htm ...

  4. 【中间件安全】IIS7.0 安全加固规范

    1. 适用情况 适用于使用IIS7进行部署的Web网站. 2. 技能要求 熟悉IIS配置操作,能够利用IIS进行建站,并能针对站点使用IIS进行安全加固. 3. 前置条件 1. 根据站点开放端口.进程 ...

  5. Redis 自定义 RedisAppender 插件, 实现日志缓冲队列,集中日志输出.

    因为某些异步日志设置了即使队列满了,也不可丢弃,在并发高的时候,导致请求方法同步执行,响应变慢. 编写这个玩意,除了集中日志输出以外,还希望在高并发的时间点有缓冲作用. 之前用Kafka实现了一次入队 ...

  6. fs项目---->migrate-mongo的使用(一)

    tw项目中用的是mongo数据库,数据的迁移也是需求的一部分.这时我们可以使用migrate-mongo在nodejs中方便的进行数据的迁移,以下记录一下使用的过程. 一.migrate-mongo的 ...

  7. E - Train Problem I

    As the new term comes, the Ignatius Train Station is very busy nowadays. A lot of student want to ge ...

  8. web -- Navigator.vibrate(); 使设备(有振动硬件)产生有频率的振动

    MDN 文档 此方法需要用户手势. 否则,它返回false. const koa2 = require(`koa2`); const Router = require(`koa-router`); c ...

  9. Python装饰器探险

    关于python装饰器的理解和用法,推荐廖雪峰老师和这一篇博客以及知乎 以下代码均已手动敲过,看完本篇内容,包你装饰器小成! 装饰器实际上就是为了给某程序增添功能,但该程序已经上线或已经被使用,那么就 ...

  10. mysql distinct 后面没有括号

    当distinct应用到多个字段的时候,其应用的范围是其后面的所有字段,而不只是紧挨着它的一个字段,而且distinct只能放到所有字段的前面 如下语句是错误的: SELECT country, di ...