自定义顶部三格状态栏(React Native)

使用方法:
    给组件传入三个对应方法,方法返回react元素
    
    leftItem:PropTypes.func,
    middleItem:PropTypes.func,
    rightItem:PropTypes.func

import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Platform
} from 'react-native'

class TopBar extends Component{

    static propTypes={
        leftItem:PropTypes.func,
        middleItem:PropTypes.func,
        rightItem:PropTypes.func
    }

    renderLeft()
    {
        if(this.props.leftItem)
        {
            return this.props.leftItem();
        }else{
            return ;
        }
    }

    renderMiddle()
    {
        if(this.props.middleItem)
        {
            return this.props.middleItem();
        }else{
            return ;
        }
    }
    renderRight()
    {
        if(this.props.rightItem)
        {
            return this.props.rightItem();
        }else{
            return ;
        }
    }
    render()
    {
        return(

            <View style={styles.container}>
                <View>
                    {this.renderLeft()}
                </View>
                <View>
                    {this.renderMiddle()}
                </View>
                <View>
                    {this.renderRight()}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        width:Dimensions.get('window').width,
        height:Platform.OS==='ios'?66:44,
        backgroundColor:'white',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        borderBottomWidth:1,
        borderBottomColor:'#ccc'

    }

})

export default TopBar

效果图: