react-native-hxenavigationbar/js/hxeNavigationBar.js

Sohu ERP Mobile HuXiaoE special react-native component.

import React from 'react';
import {
    TouchableOpacity,
    Image,
    View,
    Text,
    StyleSheet,
    StatusBar
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

function hxeNavigationBar(parameter) {

    let navigation = parameter['navigation'];
    let config = navigation.getParam('hxeNavigationBarConfig', parameter)

    navigation = config['navigation'];
    let title = config['title'];
    let backButtonHandler = config['backButtonHandler'];
    let leftButton = config['leftButton'];
    let rightButton = config['rightButton'];
    let customButton = config['customButton'];
    let backgroundColor = config['backgroundColor'];
    let whiteTint = config['whiteTint'];

    if (backgroundColor) {
        if (whiteTint == undefined) {
            let upperCaseBackgroundColor = backgroundColor.toUpperCase();
            let reg = /^[0-9A-F]{8}$/;
            if (reg.test(upperCaseBackgroundColor)) {
                let r = parseInt('0x' + upperCaseBackgroundColor.slice(0, 2)) / 255.0;
                let g = parseInt('0x' + upperCaseBackgroundColor.slice(2, 4)) / 255.0;
                let b = parseInt('0x' + upperCaseBackgroundColor.slice(4, 6)) / 255.0;
                r *= 0.2126;
                g *= 0.7152;
                b *= 0.0722;
                let luminance = r + g + b;
                whiteTint = luminance <= 0.6
            } else {
                whiteTint = true;
            }
        }
    } else {
        whiteTint = true;
    }

    let styles = StyleSheet.create({
        headerTitle: {
            color: whiteTint ? 'white' : 'black',
            fontSize: 17
        },
        btnIcon: {
            width: 20,
            height: 20,
            tintColor: whiteTint ? 'white' : 'black',
            marginLeft: 8,
            marginRight: 8
        },
        btnText: {
            color: whiteTint ? 'white' : 'black',
            fontSize: 17,
            marginLeft: 8,
            marginRight: 8
        },
        headerButtonsView: {
            flex: 1,
            flexDirection: 'row'
        }
    });

    StatusBar.setBarStyle(whiteTint ? 'light-content' : 'default');

    this.headerTitle = title;
    this.headerTitleStyle = styles.headerTitle;

    if (backgroundColor) {
        this.headerBackground = <View style={{backgroundColor: '#' + backgroundColor, flex: 1}}/>;
    } else {
        this.headerBackground = <LinearGradient
            colors={['#2BA2EF', '#8CCCF6']}
            style={{flex: 1}}
        />;
    }

    let leftButtons = [];

    let btnBack = <TouchableOpacity key={0} onPress={backButtonHandler}>
        <Image
            source={{
                uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABLklEQVR4Ae3bMTJHMRSFcdgAAIAF/CtAB3QqwCpoAKgAFWgtR08PWAYg7mkAAHwzuTkzX/3m174kWSEEV3kGJ3ACA9VYfVbGA3jSugoP27GyYwXPhdc3DIAxrLYNgDGsNg6AMeyhlQ+AEeyZVfcb33KFVa6wyhVWucIqV1jlCqtcYZUrrHKFVa6wyhVWucIqFgv039hTEqsQbAzgWQCLgdutWwCLgTcALApeewN7azXEePIwHd7enlUYG7hVMgCNgdUigEbBahVAA2AAjYJ5NA9WKx+g94WmwCiaAONoAMyjATCPBsA8GgDzaADMowEwjwbAPBoA82gAzKMBMI8GwCh618oFwCi6BwCj6BEAjKGvrUysYDX/6L70hTXq4UZ8hdVtlbp885DACZzACXwHXQ+PBsfNUS0AAAAASUVORK5CYII='
            }}
            style={styles.btnIcon}
        />
    </TouchableOpacity>;

    leftButtons.push(btnBack);

    if (leftButton) {
        let leftButtonItem = leftButton.item;
        let leftButtonHandler = leftButton.handler;
        let btnLeft;
        let leftButtonItemType = typeof leftButtonItem;
        if (leftButtonItemType === 'string') {
            btnLeft = <TouchableOpacity key={1} onPress={leftButtonHandler}>
                <Text style={styles.btnText}>
                    {leftButtonItem}
                </Text>
            </TouchableOpacity>;
        } else if (leftButtonItemType === 'number' || leftButtonItemType === 'object') {
            btnLeft = <TouchableOpacity key={1} onPress={leftButtonHandler}>
                <Image source={leftButtonItem}
                       style={styles.btnIcon}
                />
            </TouchableOpacity>;
        }
        leftButtons.push(btnLeft);
    }

    this.headerLeft =
        <View style={styles.headerButtonsView}>
            {leftButtons}
        </View>;

    let rightButtons = [];

    if (rightButton) {
        let rightButtonItem = rightButton.item;
        let rightButtonHandler = rightButton.handler;
        let btnRight;
        let rightButtonItemType = typeof rightButtonItem;
        if (rightButtonItemType === 'string') {
            btnRight =
                <TouchableOpacity key={1} onPress={rightButtonHandler}>
                    <Text style={styles.btnText}>
                        {rightButtonItem}
                    </Text>
                </TouchableOpacity>;
        } else if (rightButtonItemType === 'number' || rightButtonItemType === 'object') {
            btnRight =
                <TouchableOpacity key={1} onPress={rightButtonHandler}>
                    <Image source={rightButtonItem}
                           style={styles.btnIcon}
                    />
                </TouchableOpacity>;
        }
        rightButtons.push(btnRight);
    }

    if (customButton) {
        let customButtonItem = customButton.item;
        let customButtonHandler = customButton.handler;
        let btnCustom;
        let customButtonItemType = typeof customButtonItem;
        if (customButtonItemType === 'string') {
            btnCustom =
                <TouchableOpacity key={0} onPress={customButtonHandler}>
                    <Text style={styles.btnText}>
                        {customButtonItem}
                    </Text>
                </TouchableOpacity>;
        } else if (customButtonItemType === 'number' || customButtonItemType === 'object') {
            btnCustom =
                <TouchableOpacity key={0} onPress={customButtonHandler}>
                    <Image source={customButtonItem}
                           style={styles.btnIcon}
                    />
                </TouchableOpacity>;
        }
        rightButtons.push(btnCustom);
    }

    if (rightButtons.length) {
        this.headerRight =
            <View style={styles.headerButtonsView}>
                {rightButtons}
            </View>;
    }

}

export default hxeNavigationBar;