在开发过程中,某些功能需要重复使用,利用React中的props来传递参数,通过参数来控制子组件的属性。
使用此页面先下载第三方组件非常好用
npm install --save teaset
https://github.com/rilyu/teaset
import {Label,Select} from 'teaset';按需引入标签来使用
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: (
color: "#fff",
marginRight: 10
}} onPress={() => navigate("search")}>
),
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 (
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.ageItemsValue}
items={this.ageItems}
prompt={'选择出生年月'}
/>
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.customItemsValue}
items={this.customItems}
prompt={'选择性别'}/>
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.cityItemsValue}
items={this.cityItems}
prompt={'选择城市'}/>
goBack()
}}
style={styles.pcTextView}>
)
}
}
class InfoItem extends Component {
render() {
return (
{this.props.title}
);
}
}
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,
}
});