week_7_demo_6

TabIcon.js

import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  Dimensions,
} from 'react-native';


const windowWidth = Dimensions.get('window').width;
const tabWidth = Math.round(windowWidth / 3);

const tabStyle = {
  container: {
    width: tabWidth,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
  }
}

export default class TabIcon extends Component {
  constructor(props) {
    super(props);
  }
  showIcon = () => {
    switch (this.props.name) {
      case "homeMain":
        if (this.props.selected) {
          return (
            <View style={[tabStyle.container, {backgroundColor: "#ff0000"}]}>
              <Text style={{color: "#ffffff"}}>首頁</Text>
            </View>
          )
        } else {
          return (
            <View style={[tabStyle.container, {backgroundColor: "#dddddd"}]}>
              <Text style={{color: "#000000"}}>首頁</Text>
            </View>
          )
        }
      case "picker":
      if (this.props.selected) {
        return (
          <View style={[tabStyle.container, {backgroundColor: "#000000"}]}>
            <Text style={{color: "#ffffff"}}>選擇器</Text>
          </View>
        )
      } else {
        return (
          <View style={[tabStyle.container, {backgroundColor: "#dddddd"}]}>
            <Text style={{color: "#000000"}}>選擇器</Text>
          </View>
        )
      }
      case "datePicker":
      if (this.props.selected) {
        return (
          <View style={[tabStyle.container, {backgroundColor: "#000000"}]}>
            <Text style={{color: "#ffffff"}}>日期選擇器</Text>
          </View>
        )
      } else {
        return (
          <View style={[tabStyle.container, {backgroundColor: "#dddddd"}]}>
            <Text style={{color: "#000000"}}>日期選擇器</Text>
          </View>
        )
      }
    }
  }
  render() {
    // console.log(this.props);
    return (
      <View style={{width: tabWidth, height: 60, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.8)'}}>
        {this.showIcon()}
      </View>
    )
  }

}