React native

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;

上一篇下一篇

猜你喜欢

热点阅读