React-Native 一个简单的头部组件
2017-08-29 本文已影响22人
焚_44b3
功能要求:
创建一个二级头,头部标题居中显示,最右侧有个退出按钮。
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
View,
Text,
Button,
} from 'react-native';
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;
class TopScreen extends React.Component{
render(){
return(
<View style={styles.secHeader}>
<View style={styles.secTitle}>
<Text style={styles.secTitleText}>个人中心</Text>
</View>
<View style={styles.secLogout}>
<Text style={styles.secLogoutText}>注销</Text>
</View>
</View>
);
}
}
const styles=StyleSheet.create({
secHeader:{
backgroundColor:"#f1f1f1",
borderBottomWidth:1,
borderBottomColor:"#ddd",
},
secTitle:{
height:50,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
secTitleText:{
fontSize:18,
fontWeight:'600',
},
secLogout:{
height:50,
width:ScreenWidth-10,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
position: 'absolute',
},
});
module.exports=TopScreen;