移动跨平台框架ReactNative选择器Picker【18】
React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用
React Native 选择器 Picker
如果要从多个 已知的选项 中选择一个，那么可以使用 React Native 内置的 选择器 ``。
选择器 `` 类似于 HTML 中的 select 标签 。
选择器 `` 默认显示如下
React Native 选择器 Picker
当被点击时显示如下
React Native 选择器 Picker
引入组件
import { Picker } from 'react-native'使用语法
<Picker
selectedValue = "male"
onValueChange = {updateUser} >
<Picker.Item label = "男" value = "male" />
<Picker.Item label = "女" value = "female" />
<Picker.Item label = "其它" value = "other" />
</Picker>属性 | 说明 |
|---|---|
selectedValue | 用于设置默认的选中项目 |
onValueChange | 用于设置选中项变更时的触发操作 |
onValueChange 属性
onValueChange 属性用于设置 `` 中的选项变更时触发的操作。
onValueChange 属性的触发的事件原型如下
function(itemValue,itemPosition) {
// 具体的处理逻辑
}参数 | 说明 |
|---|---|
itemValue | 选中项 `` 的 value 值 |
itemPosition | 选中项 `` 的位置，第一个位置为 0 |
选项 ``
`` 用于设置每一个选项，使用语法如下
<Picker.Item label = "男" value = "male" />属性 | 说明 |
|---|---|
label | 用于设置显示出来的名称 |
value | 用于设置选项的值 |
范例
下面的范例，当我们点击 请选择性别 时会弹出一个 `` 用于提供性别选择。
App.js
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class App extends Component {
users = [
{label: '请选择性别',value:''},
{label: '男',value:'male'},
{label: '女',value:'female'},
{label: '其它',value:'other'}
]
state = {user: ''}
updateUser = (user) => {
this.setState({ user: user })
}
render() {
return (
<View style={styles.container}>
<Text style = {styles.label}>请选择性别</Text>
<Picker
selectedValue = {this.state.user}
onValueChange = {this.updateUser}>
{
this.users.map((o,index) =>
<Picker.Item label={o.label} value = {o.value}/>
)
}
</Picker>
<Text style = {styles.label}>你的选择是</Text>
<Text style = {styles.text}>{this.state.user}</Text>
</View>
)
}
}
export default App
const styles = StyleSheet.create({
container: {
margin:50,
},
label: {
fontSize: 14,
color:'#333333'
},
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
})
color:'#333333'
},
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。