React-native 之Picker的使用

本系列教程是学习东方耀老师的课程中按照教程写的课堂笔记，基础控件的使用其实与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);