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

短命女 2021-07-24 21:16 358阅读 0赞

使用方法:
        给组件传入三个对应方法,方法返回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

效果图:  
![在这里插入图片描述][20200831153439740.png_pic_center]

[20200831153439740.png_pic_center]: /images/20210724/9813e1f398664691bea2f62a30b94353.png