efunbox-mobile-8/pages/components/CourseTitle.js

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  Button,
  Dimensions,
  DeviceEventEmitter
} from "react-native";

/** 因没有图，所以Image先用颜色代替，有图可替换 */
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;
export default class CourseTitle extends Component<Props> {
  render() {
    return (
      <View
        style={{
          flex: 1,
          width: this.props.width,
          height: this.props.height,
          flexDirection: "column",
          // backgroundColor: this.props.backgroundColor ?  this.props.backgroundColor : '#fff'
        }}
      >
        <View
          style={{
            flex: 1
          }}
        />
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            alignItems: 'center'
          }}
        >
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <TouchableOpacity activeOpacity={1} onPress={this.props.backPress}>
              {this.selectleftIcon()}
            </TouchableOpacity>
          </View>
          <View
            style={{
              flex: 5,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Text
              style={{
                width: "100%",
                fontSize: 16,
                fontWeight: "bold",
                color: this.props.textcolor,
                textAlign: "center"
              }}
            >
              {this.props.title}
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <TouchableOpacity activeOpacity={1} onPress={this.props.rightPress}>
              {this.props.righttype ? this.selectRightIcon() : null}
            </TouchableOpacity>
          </View>
        </View>
        <View
          style={{
            flex: 1
          }}
        />
      </View>
    );
  }

  selectleftIcon() {
    let type = this.props.lefttype;
    let back = "";
    switch (type) {
      case 1:
        //左侧返回图片1
        back = require("../images/schedulePage/back_black.png");
        break;
      case 2:
        //左侧返回图片2
        back = require("../images/userInfo/back_white.png");
        break;
    }
    return (
      <Image
        source={back}
        style={{
          width: 20,
          height: 20,
          resizeMode: "contain"
        }}
      />
    );
  }
  selectRightIcon() {
    let type = this.props.righttype;
    let right = "";
    switch (type) {
      case 1:
        //课程表标题，右侧是分享
        right = require("../images/common/share.png");
        break;
      case 2:
        //个人中心，右侧是设置
        right = require("../images/common/setting.png");
        break;
      default:
        return true;
    }
    return (
      <Image
        source={right}
        style={{
          width: 30,
          height: 30
        }}
      />
    );
  }
}
/**
  <CourseTitle
              width={this.getWindowWidth()}
              title="第12周 爱上幼儿园"
              //设置左侧按钮样式
              lefttype={2}
              //设置右侧按钮样式
              righttype={1}
              //设置文字颜色
              textcolor={"red"}
              // backPress={() => this.goBack()}
              //左侧按钮方法
              backPress={() => alert("点击返回")}
              //右侧按钮方法
              rightPress={() => alert("点击分享")}
            />
          </View>

 */