我只想为我的应用程序创建智能大小的ui。 下面的代码是我登录后的主页，这里总共有8个按钮，每次单击我都将进入不同的页面。 但我想使这些按钮动态化，我的意思是，所有屏幕尺寸在手机或平板电脑上都应该相同。请帮忙。
import React, { Component } from 'react';
import { Container, Header, Title, Content ,Footer,DatePicker, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
import { View,StyleSheet,TouchableHighlight } from 'react-native';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Dimensions } from "react-native";
export default class HomeScreen extends Component {
onClickListener = (viewId) => {
if(viewId == 'tag')
{
this.props.navigation.navigate('ApplianceTag');
} else if(viewId == 'openticket') {
this.props.navigation.navigate('OpenTicket');
}else if (viewId == 'updateinventory'){
this.props.navigation.navigate('UpdateInventory')
}else if(viewId == 'viewissues') {
this.props.navigation.navigate('ViewIssues');
} else if(viewId == 'infopage') {
this.props.navigation.navigate('RetrieveInfo');
} else if(viewId == 'contactinfo') {
this.props.navigation.navigate('ContactInfo');
} else if(viewId == 'ratings') {
this.props.navigation.navigate('Ratings');
}
}
constructor(props) {
super(props);
this.state = { pressStatus: false };
}
_onHideUnderlay() {
this.setState({ pressStatus: false });
}
_onShowUnderlay() {
this.setState({ pressStatus: true });
}
onPress = () => {
}
render() {
const SCREEN_HEIGHT = Dimensions.get("window").height;
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Welcome Suresh</Title>
</Body>
<Right />
</Header>
<Content>
// all 8 buttons comes under the grid ,
<Grid>
// in below col total 4 buttons is there
<Col >
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#82E0AA', borderRadius: 10}}
onPress={() => this.onClickListener('tag')}>
<Icon name='pricetag' style={{fontSize: 40, color: 'blue'}} />
<Text style={{fontSize: 15}}>Tag{'\n'}Inventory</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#F5B7B1', borderRadius: 10}}
onPress={() => this.onClickListener('openticket')}>
<Icon name='bug' style={{fontSize: 40, color: 'red'}} />
<Text style={{fontSize: 15}}>Open{'\n'}Ticket</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#F7DC6F', borderRadius: 10}}>
<Icon name='hand' style={{fontSize: 40, color: 'green'}} />
<Text style={{fontSize: 15}}>Request{'\n'}Spares</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#AED6F1', borderRadius: 10}}
onPress={() => this.onClickListener('ratings')}>
<Icon name='star' style={{fontSize: 40, color: 'gold'}} />
<Text style={{fontSize: 15}}>Rate{'\n'}Staff</Text>
</Button>
</Row>
</Col>
// again here in below col 4 buttons is there
<Col >
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#82E0AA', borderRadius: 10}}
onPress={() => this.onClickListener('updateinventory')}>
<Icon name='checkmark' style={{fontSize: 40, color: 'blue'}} />
<Text style={{fontSize: 15}}>Update{'\n'}Inventory</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#F5B7B1', borderRadius: 10}}
onPress={() => this.onClickListener('viewissues')} >
<Icon name='paper' style={{fontSize: 40, color: '#8E44AD'}} />
<Text style={{fontSize: 15}}>View{'\n'}Issues</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#F7DC6F', borderRadius: 10}}
onPress={() => this.onClickListener('infopage')} >
<Icon name='paper' style={{fontSize: 40, color: 'green'}} />
<Text style={{fontSize: 15}}>Retrieve{'\n'}Info</Text>
</Button>
</Row>
<Row style= {{flex:1}}>
<Button iconleft rounded light style={{flex:1,
backgroundColor: '#AED6F1', borderRadius: 10}}
onPress={() => this.onClickListener('contactinfo')} >
<Icon name='call' style={{fontSize: 40, color: 'black'}} />
<Text style={{fontSize: 15}}>Contact{'\n'}Info</Text>
</Button>
</Row>
</Col>
</Grid>
</Content>
<Footer>
<FooterTab>
<Button full>
<Text style={{textAlign:'center', fontSize: 15}}>VSenze{'\n'}
<Text style={{fontSize:10}}>All rights reserved to JNARK Research and Development, 2018</Text></Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent:"center",
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#000066',
},
welcomePress: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#ffffff',
},
button: {
borderColor: '#000066',
borderWidth: 1,
borderRadius: 10,
},
buttonPress: {
borderColor: 'blue',
borderWidth: 1,
borderRadius: 10,
},
});
}}
//上面的代码是正在使用的完整代码..请帮助。 谢谢