React-native 之Picker的使用

前端之家收集整理的这篇文章主要介绍了React-native 之Picker的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果图如下:



代码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);

猜你在找的React相关文章