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