autobots-lib/lib/navigator-bar.js

汽车人基础库

'use strict';

import React, { Component } from 'react';
import ReactNative from 'react-native';
import Colors from '../util/colors';
import Icons from '../util/icons';


const {
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
  Modal,
  Image,
  PixelRatio,
  Platform,
  Dimensions,
  NativeModules
} = ReactNative;

const win = Dimensions.get('window');
const HEIGHT = win.height;
const WIDTH = win.width;

class ns_navigationbar extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    //console.log(this.props.navigator);

  }

  _renderRightButton() {

    var rightButtons = this.props.rightButtons;
    var arr = [];

    if (rightButtons) {
      rightButtons.map((val, idx) => {

        if (val.buttonIcon && val.buttonIcon != "") {
          arr.push(
            <TouchableOpacity style={[styles.rightTouchButton, Platform.OS == 'ios' ? styles.iosSpecificTop : ""]} key={"topbutton" + idx} onPress={() => {
              if (val.onButtonPress) {
                val.onButtonPress();
              }
            }}>
              <Image source={val.buttonIcon} resizeMode={'contain'} style={styles.imageicon} />
            </TouchableOpacity>
          );
        }
        else if (val.buttonText && val.buttonText != "") {
          arr.push(
            <TouchableOpacity style={[styles.rightTouchButton, Platform.OS == 'ios' ? styles.iosSpecificTop : ""]} key={"topbutton" + idx} onPress={() => {
              if (val.onButtonPress) {
                val.onButtonPress();
              }
            }}>
              <Text allowFontScaling={false} style={val.buttonStyle ? val.buttonStyle : styles.rightButtonText}>{val.buttonText}</Text>
            </TouchableOpacity>
          );
        }

      });

    }
    return arr;

  }
  _renderLeftButton() {

    if (!this.props.hideLeftIcon) {
      return (<TouchableOpacity style={styles.leftTouchButton} onPress={() => {
        if (this.props.onLeftButtonPress) {
          this.props.onLeftButtonPress();
        } else {
          this.props.navigator.pop();
        }

      }}>
        {this.props.leftButtonText
          ? <Text style={this.props.leftButtonStyle ? this.props.leftButtonStyle : [styles.leftButtonText, Platform.OS == 'ios' ? styles.iosSpecificTop : ""]}>{this.props.leftButtonText}</Text>
          : this.props.leftButtonIcon
            ? <Image source={this.props.leftButtonIcon} style={this.props.leftButtonStyle} />
            : <Image source={Icons.left} style={[styles.leftIcon, Platform.OS == 'ios' ? styles.iosSpecificTop : ""]} />
        }

      </TouchableOpacity>)
    }
  }

  render() {
    return (<View style={styles.container}>

      <View style={styles.leftButton}>
        {this._renderLeftButton()}
      </View>
      <View style={styles.title}>
        <Text allowFontScaling={false} style={[styles.titleText, Platform.OS == 'ios' ? styles.iosSpecificTop : ""]}>{this.props.title}</Text>
      </View>
      <View style={styles.rightButton}>
        {this._renderRightButton()}
      </View>
      <View style={styles.cellBorder} />
    </View>
    )
  }
}

// let mainHeight=64;
// if(Platform.OS!='ios'){
//   mainHeight=50;
// }



function isIPhoneX() {
  if (Platform.OS !== 'ios') {
    return false;
  }

  // if(NativeModules.DeviceModule){
  //   return NativeModules.DeviceModule.isIphoneX
  // }

  const { width, height } = Dimensions.get('window');
  return (
    (height === 812.0 && width === 375.0) ||
    (height === 896.0 && width === 414.0) ||
    (height == 926.0 && width == 428.0) ||
    (height == 844.0 && width == 390.0) ||
    (height == 780.0 && width == 360.0)
  );
}


let styles = StyleSheet.create({
  container: {
    width: WIDTH,
    ...Platform.select({
      ios: { height: isIPhoneX() ? 88 : 64, paddingTop: isIPhoneX() ? 20 : 0 },
      android: { height: 50 }
    }),

    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: 'rgba(0, 0, 0, 0.3)',
    flexDirection: 'row',
    backgroundColor: Colors.white,
  },
  leftButton: {
    flex: 2,
    justifyContent: 'center',
  },
  leftTouchButton: {
    height: 50,
    width: 60,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  leftButtonText: {
    marginLeft: 15,
    // marginTop:18,
    fontSize: 16,
    fontWeight: 'bold',
    color: Colors.darkGrey,
  },
  rightButton: {
    alignItems: 'center',
    flex: 2,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  rightTouchButton: {
    flex: 1,
    // marginTop:18,
    alignItems: 'flex-end',
    paddingRight: 20,
  },
  rightButtonText: {

    fontSize: 16,
    fontWeight: 'bold',
    color: Colors.blue,
  },
  title: {
    flex: 4,
    paddingTop: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    fontSize: Platform.OS == 'ios' ? 18 : 20,
    fontWeight: Platform.OS == 'ios' ? 'bold' : 'normal',
    color: Colors.black,
  },
  imageicon: {
    width: 20,
    height: 20,
  },
  leftIcon: {
    marginLeft: 12,
    width: 14,
    height: 23,
  },
  iosSpecificTop: {
    marginTop: 18,
  }

});

export default ns_navigationbar;