在开发过程中，某些功能需要重复使用，利用React中的props来传递参数，通过参数来控制子组件的属性。

使用此页面先下载第三方组件非常好用

npm install --save teaset

https://github.com/rilyu/teaset

import {Label,Select} from 'teaset';按需引入标签来使用

B58AB9BA-028C-4900-8C4B-BAD75FFE542B.png

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
Image,
Button,
ScrollView,
TouchableOpacity,
} from 'react-native';
import {Label,Select} from 'teaset';

//获取屏幕尺寸
var width = require("Dimensions").get('window').width;
var height = require("Dimensions").get('window').height;

export default class Info extends Component {
static navigationOptions = ({navigation}) => {
var {navigate} = navigation;
return {
headerTitle: "个人信息",
headerRight: (
<Text style={{
fontSize: 16,
color: "#fff",
marginRight: 10
}} onPress={() => navigate("search")}></Text>
),
headerStyle: {
backgroundColor: "#ff6600",
},
headerTitleStyle: {
alignSelf: "center"
},
headerTintColor: '#fff'
}
};
constructor(props) {
super(props);
this.state = {
};
}
ageItems=[
{
text:'2000',
value:'1',
},
{
text:'2001',
value:'2',
}
];
customItems = [
{
text: '男',
value: 1,
},
{
text: '女',
value: 2,
}
];
cityItems = [
{
text: '深圳',
value: 1,
},
{
text: '北京',
value: 2,
},
{
text: '上海',
value: 3,
},
{
text: '广州',
value: 4,
},
{
text: '成都',
value: 5,
},
{
text: '重庆',
value: 6,
},
{
text: '武汉',
value: 7,
},
{
text: '杭州',
value: 8,
}
];
render() {
const {navigate,goBack} = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView>
<InfoItem title={'出生年月'}
onSelected={(item, index) => this.setState({ageItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.ageItemsValue}
items={this.ageItems}
prompt={'选择出生年月'}
/>
<InfoItem title={'性别'}
onSelected={(item, index) => this.setState({customItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.customItemsValue}
items={this.customItems}
prompt={'选择性别'}/>
<InfoItem title={'城市'}
onSelected={(item, index) => this.setState({cityItemsValue: item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.cityItemsValue}
items={this.cityItems}
prompt={'选择城市'}/>
<TouchableOpacity
onPress={() => {
goBack()
}}
style={styles.pcTextView}>
<Text style={styles.pcText}>保存</Text>
</TouchableOpacity>
</ScrollView>
</View>
)

}
}

class InfoItem extends Component {
render() {
return (
<View style={styles.bigView}>
<View style={styles.lineView}>
<Text>
{this.props.title}
</Text>
<Select
style={{width: 200, backgroundColor: '#fff', borderColor: '#999'}}
value={this.props.value}
valueStyle={{flex: 1, color: '#000', textAlign: 'right'}}
items={this.props.items}
getItemValue={this.props.getItemValue}
getItemText={this.props.getItemText}
iconTintColor='#000'//上下剑头的颜色
placeholder={this.props.prompt}//框内提示文字
pickerTitle={this.props.title}//弹出框标题
onSelected={this.props.onSelected}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F0F0F0'
},
bigView:{
backgroundColor:"#fff",
borderColor:"#999",
borderStyle:"solid",
borderBottomWidth:1,
},
lineView:{
width:width0.9,
marginLeft:width0.05,
height:50,
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
},
pcTextView:{
backgroundColor:"#ff6600",
width:width,
height:50,
borderRadius:25,
alignItems:"center",
justifyContent:"center",
marginTop:20,
},
pcText:{
color:"#fff",
fontSize:16,
}
});