3.5.1 公用导航头

• 使用到的常量

import {Dimensions,Platform,StatusBar,} from 'react-native';
global.width = Dimensions.get('window').width;
global.height = Dimensions.get('window').height;
global._ios_ = Platform.OS === 'ios' ? true : false;
global._iphoneX_ = width == 375 && height == 812 ? true : false;
global._iphoneXR = width == 414 && height == 896 ? true : false;
global._statusBaHeight_ = StatusBar.currentHeight;

上面用到的常量可以放到项目index.js文件进行初始化。

• 公用导航头封装

import React, {Component,} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions,
    StatusBar,
    Platform
} from 'react-native';

import {Dimensions,Platform,StatusBar,} from 'react-native';
global.width = Dimensions.get('window').width;
global.height = Dimensions.get('window').height;
global._ios_ = Platform.OS === 'ios' ? true : false;
global._iphoneX_ = width == 375 && height == 812 ? true : false;
global._iphoneXR = width == 414 && height == 896 ? true : false;
global._statusBaHeight_ = StatusBar.currentHeight;

export class pageComponent extends Component {
    constructor(props){
        super(props);
        this.state={
            swicthValue: false
        }
    }

    render(){
        return (
            <View style={[styles.bar, this.props.style]}>
                {this.props.leftBtn ? <TouchableOpacity style={[styles.leftBtn]}
                                                        onPress={() => this.props.leftBtnTouch && this.props.leftBtnTouch()}>
                    {this.props.leftBtnView}
                </TouchableOpacity> : null}
                {this.props.rightBtn ? <TouchableOpacity style={[styles.rightBtn]}
                                                         onPress={() => this.props.rightBtnTouch && this.props.rightBtnTouch()}>
                    {this.props.rightBtnView}
                </TouchableOpacity> : null}
                <Text style={styles.title}>{this.props.title}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    bar: {
        width: width,
        height: 88,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        paddingTop: _ios_ ? (_iphoneX_||_iphoneXR ? 44 : 20) : _statusBaHeight_,
    },
    back: {
        fontSize: 20,
        color: '#fff',
    },
    title: {
        color: '#313131',
        fontSize: 20
    },
    leftBtn: {
        position: 'absolute',
        left: 0,
        justifyContent: 'center',
        alignItems: 'center',
        height: 88,
        paddingTop: _ios_ ? (_iphoneX_||_iphoneXR ? 44 : 20) : _statusBaHeight_,
        paddingLeft: 15,
        paddingRight: 20,
    },
    rightBtn: {
        position: 'absolute',
        right: 0,
        justifyContent: 'center',
        alignItems: 'center',
        height: 88,
        paddingTop: _ios_ ? (_iphoneX_||_iphoneXR ? 44 : 20) : _statusBaHeight_,
        paddingLeft: 20,
        paddingRight: 15,
    },
});