[英]How align a Content vertically aligned middle in the screen?
在下面給出的圖像中,您可以看到名稱和電子郵件未在視圖中間對齊。 因此,我想將它們精確地對准此垂直視圖的中間,
我還在下面提供了此類的代碼-
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
class HomeDrawer extends Component {
constructor(props) {
super(props);
this.state= {loading:true};
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<Container style={styles.Container}>
<Header style={styles.drawerHeader}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ios/50/000000/administrator-male-filled.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text>S. M. Asif Ul Haque</Text>
<Text>asif@abc.com</Text>
</View>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
}
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const styles = StyleSheet.create({
Container:{
textAlign:'center'
},
drawerHeader:{
height:200,
textAlign:'center',
backgroundColor: 'white'
},
drawerHeaderText:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#5555'
},
drawerImage:{
height: 100,
width: 100,
borderRadius: 75
},
drawerBody: {
flexDirection:'row',
justifyContent:'space-between',
textAlign:'center',
backgroundColor:'#aaaa'
}
});
export default HomeDrawer;
那么,我該怎么做才能將它們垂直對齊到抽屜標題的中間?
在您的drawerBody
設置alignItems:'center'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.