React-native 之Picker的使用

最新推荐文章于 2025-06-06 09:21:38 发布

星期八的日出

最新推荐文章于 2025-06-06 09:21:38 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： react native

本文链接：https://blog.youkuaiyun.com/javayujiafeng/article/details/52862324

react native 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在React-native中使用Picker组件。通过示例代码展示了Picker的基本配置，包括设置初始值、监听值变化、模式选择以及样式定制。在实际应用中，Picker用于让用户在预定义的选项中进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本系列教程是学习东方耀老师的课程中按照教程写的课堂笔记，基础控件的使用其实与Android及iOS类似，并没有太大的区别，因此此处只记录代码，不做更多分析，等后期项目实战阶段再详细分析。

效果图如下：

代码index.ios.js

import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
PiexRatio,
TouchableOpacity,
Picker,
} from 'react-native';

class ReactDemo extends Component {
constructor(props) {
super(props);
this.state = {
language:null
};
}

render() {
return (
<View style={[styles.flex,{marginTop:45}]}>
<Text>Picker组件</Text>
<Picker
selectedValue={this.state.language}
onValueChange={lang => this.setState({language:lang})}
mode="dialog"
style={{color:'#f00'}}
>
<Picker.Item label="Java" value="Java"/>
<Picker.Item label="JavaScript" value="js"/>
<Picker.Item label="C语音" value="c"/>
<Picker.Item label="PHP开发" value="php"/>
</Picker>
<Text>{this.state.language}</Text>
</View>
);
}
}

AppRegistry.registerComponent('ReactDemo',() => ReactDemo);