huiliao-app/react-native-chat-demo-master/native-base-theme/components/Header.js

import { PixelRatio } from "react-native";

import variable from "./../variables/platform";

export default (variables = variable) => {
	const platformStyle = variables.platformStyle;
	const platform = variables.platform;

	const headerTheme = {
		".span": {
			height: 128,
			"NativeBase.Left": {
				alignSelf: "flex-start",
			},
			"NativeBase.Body": {
				alignSelf: "flex-end",
				alignItems: "flex-start",
				justifyContent: "center",
				paddingBottom: 26,
			},
			"NativeBase.Right": {
				alignSelf: "flex-start",
			},
		},
		".hasSubtitle": {
			"NativeBase.Body": {
				"NativeBase.Title": {
					fontSize: variables.titleFontSize - 2,
					fontFamily: variables.titleFontfamily,
					textAlign: "center",
				},
				"NativeBase.Subtitle": {
					fontSize: variables.subTitleFontSize,
					fontFamily: variables.titleFontfamily,
					color: variables.subtitleColor,
					textAlign: "center",
				},
			},
		},
		".noShadow": {
			elevation: 0,
			shadowColor: null,
			shadowOffset: null,
			shadowRadius: null,
			shadowOpacity: null,
		},
		".hasTabs": {
			elevation: 0,
			shadowColor: null,
			shadowOffset: null,
			shadowRadius: null,
			shadowOpacity: null,
			borderBottomWidth: null,
		},
		".hasSegment": {
			elevation: 0,
			shadowColor: null,
			shadowOffset: null,
			shadowRadius: null,
			shadowOpacity: null,
			borderBottomWidth: null,
		},
		"NativeBase.Button": {
			justifyContent: "center",
			alignSelf: "center",
			alignItems: "center",
			".transparent": {
				"NativeBase.Text": {
					color: variables.toolbarBtnColor,
					fontWeight: "600",
				},
				"NativeBase.Icon": {
					color: variables.toolbarBtnColor,
				},
				"NativeBase.IconNB": {
					color: variables.toolbarBtnColor,
				},
				paddingHorizontal: variables.buttonPadding,
			},
			paddingHorizontal: 15,
		},
		".searchBar": {
			"NativeBase.Item": {
				"NativeBase.Icon": {
					backgroundColor: "transparent",
					color: variables.dropdownLinkColor,
					fontSize: variables.toolbarSearchIconSize,
					alignItems: "center",
					marginTop: 2,
					paddingRight: 10,
					paddingLeft: 10,
				},
				"NativeBase.IconNB": {
					backgroundColor: "transparent",
					color: null,
					alignSelf: "center",
				},
				"NativeBase.Input": {
					alignSelf: "center",
					lineHeight: 24,
					height: variables.searchBarHeight,
				},
				alignSelf: "center",
				alignItems: "center",
				justifyContent: "flex-start",
				flex: 1,
				height: variables.searchBarHeight,
				borderColor: "transparent",
				backgroundColor: variables.toolbarInputColor,
			},
			"NativeBase.Button": {
				".transparent": {
					"NativeBase.Text": {
						fontWeight: "500",
					},
					paddingHorizontal: null,
					paddingLeft: platform === "ios" ? 10 : null,
				},
				paddingHorizontal: platform === "ios" ? undefined : null,
				width: platform === "ios" ? undefined : 0,
				height: platform === "ios" ? undefined : 0,
			},
		},
		".rounded": {
			"NativeBase.Item": {
				borderRadius: platform === "ios" && platformStyle !== "material" ? 25 : 3,
			},
		},
		"NativeBase.Left": {
			"NativeBase.Button": {
				".hasText": {
					marginLeft: -10,
					height: 30,
					"NativeBase.Icon": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize,
						marginTop: 2,
						marginRight: 5,
						marginLeft: 2,
					},
					"NativeBase.Text": {
						color: variables.toolbarBtnColor,
						fontSize: 17,
						marginLeft: 2,
						lineHeight: 21,
					},
					"NativeBase.IconNB": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize,
						marginTop: 2,
						marginRight: 5,
						marginLeft: 2,
					},
				},
				".transparent": {
					marginLeft: -3,
					"NativeBase.Icon": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize,
						marginTop: 2,
						marginRight: 2,
						marginLeft: 2,
					},
					"NativeBase.IconNB": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize,
						marginTop: 2,
						marginRight: 2,
						marginLeft: 2,
					},
					"NativeBase.Text": {
						color: variables.toolbarBtnColor,
						fontSize: 17,
						top: platform === "ios" ? undefined : -1.5,
					},
					backgroundColor: "transparent",
					borderColor: null,
					elevation: 0,
					shadowColor: null,
					shadowOffset: null,
					shadowRadius: null,
					shadowOpacity: null,
				},
				"NativeBase.Icon": {
					color: variables.toolbarBtnColor,
				},
				"NativeBase.IconNB": {
					color: variables.toolbarBtnColor,
				},
				alignSelf: null,
				paddingHorizontal: variables.buttonPadding,
			},
			flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5,
			alignSelf: "center",
			alignItems: "flex-start",
		},
		"NativeBase.Body": {
			flex: 1,
			alignItems: platform === "ios" && platformStyle !== "material" ? "center" : "flex-start",
			alignSelf: "center",
			"NativeBase.Segment": {
				borderWidth: 0,
				alignSelf: "flex-end",
				marginRight: platform === "ios" ? -40 : -55,
			},
			"NativeBase.Button": {
				alignSelf: "center",
				".transparent": {
					backgroundColor: "transparent",
				},
				"NativeBase.Icon": {
					color: variables.toolbarBtnColor,
				},
				"NativeBase.IconNB": {
					color: variables.toolbarBtnColor,
				},
				"NativeBase.Text": {
					color: variables.inverseTextColor,
					backgroundColor: "transparent",
				},
			},
		},
		"NativeBase.Right": {
			"NativeBase.Button": {
				".hasText": {
					height: 30,
					"NativeBase.Icon": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize - 2,
						marginTop: 2,
						marginRight: 2,
						marginLeft: 5,
					},
					"NativeBase.Text": {
						color: variables.toolbarBtnColor,
						fontSize: 17,
						lineHeight: 21,
					},
					"NativeBase.IconNB": {
						color: variables.toolbarBtnColor,
						fontSize: variables.iconHeaderSize - 2,
						marginTop: 2,
						marginRight: 2,
						marginLeft: 5,
					},
				},
				".transparent": {
					marginRight: -8,
					paddingHorizontal: 15,
					borderRadius: 50,
					"NativeBase.Icon": {
						color: variables.toolbarBtnColor,
						fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
						marginTop: 2,
						marginLeft: 2,
						marginRight: 2,
					},
					"NativeBase.IconNB": {
						color: variables.toolbarBtnColor,
						fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
						marginTop: 2,
						marginLeft: 2,
						marginRight: 2,
					},
					"NativeBase.Text": {
						color: variables.toolbarBtnColor,
						fontSize: 17,
						top: platform === "ios" ? undefined : -1.5,
					},
					backgroundColor: "transparent",
					borderColor: null,
					elevation: 0,
					shadowColor: null,
					shadowOffset: null,
					shadowRadius: null,
					shadowOpacity: null,
				},
				"NativeBase.Icon": {
					color: variables.toolbarBtnColor,
				},
				"NativeBase.IconNB": {
					color: variables.toolbarBtnColor,
				},
				alignSelf: null,
				paddingHorizontal: variables.buttonPadding,
			},
			flex: 1,
			alignSelf: "center",
			alignItems: "flex-end",
			flexDirection: "row",
			justifyContent: "flex-end",
		},
		backgroundColor: variables.toolbarDefaultBg,
		flexDirection: "row",
		paddingHorizontal: 10,
		justifyContent: "center",
		paddingTop: platform === "ios" ? 15 : 0,
		borderBottomWidth: platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
		borderBottomColor: variables.toolbarDefaultBorder,
		height: variables.toolbarHeight,
		elevation: 3,
		shadowColor: platformStyle === "material" ? "#000" : undefined,
		shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined,
		shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
		shadowRadius: platformStyle === "material" ? 1.2 : undefined,
		top: 0,
		left: 0,
		right: 0,
	};

	return headerTheme;
};