import * as React from 'react' import {View, Text, StyleSheet, TouchableOpacity, Image, ScrollView} from 'react-native' import {BirthdayEditName, RootStackScreenProps} from '../../Common/define/Defines' import BirthdayData from '../data/BirthdayData' import {isObject} from '../../Common/tool/TypeTool' import DateHelper from '../../Common/date/DateHelper' import LunarSolarHelper from '../../Common/Solar&Lunar/LunarSolarHelper' import EightWordsHelper from '../../Common/Solar&Lunar/EightWordsHelper' export default class BirthdayDetail extends React.Component> { constructor(props: any) { super(props) const navigation = this.props.navigation navigation.setOptions({ title: '生日信息', headerLeft: this._headerLeft.bind(this), headerRight: this._headerRight.bind(this), }) } _headerLeft = () => { return ( ) } _onPressNaviBackBtn = () => { const navigation = this.props.navigation navigation.pop(1) } _headerRight = () => { return ( {'编辑'} ) } _onPressEdit = async () => { const navigation = this.props.navigation const data = this._getBirthdayData() if (!isObject(data)) { return } navigation.push(BirthdayEditName, data!) } render() { return ( {this._renderHeader()} {this._renderAge()} {this._renderBirthday()} {this._renderTime()} {this._renderAnimal()} {this._renderConstellation()} {this._renderBirthdayYearHeader()} {this._renderBirthdayYearDate()} {this._renderBirthdayYearWeek()} {this._renderThisYearHeader()} {this._renderThisYearDate()} {this._renderThisYearWeek()} {this._renderNextYearHeader()} {this._renderNextYearDate()} {this._renderNextYearWeek()} {this._renderMoreInfoHeader()} {this._renderMoreInfo()} ) } _renderHeader = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const isLunar = data!.isLunar const tagTitle = isLunar ? '农历' : '公历' const tagBgColorStyle = {backgroundColor: isLunar ? '#51C4F3' : '#FA883D'} const name = data!.getShowName() return ( {name} {tagTitle} ) } _renderAge = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } return this._renderItem('年龄', '虚岁' + data!.getAge()) } _renderBirthday = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } return this._renderItem('生日', data!.getBirthdayInfo()) } _renderTime = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } return this._renderItem('时间', data!.getShowHour()) } _renderAnimal = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } return this._renderItem('生肖', data!.getAnimal()) } _renderConstellation = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } return this._renderItem('星座', data!.getConstellation()) } _renderItem = (leftText: string, rightText: string) => { return ( {leftText} {rightText} ) } _getBirthdayData = (): BirthdayData | null => { const route = this.props.route const data: BirthdayData = route.params return data } _renderBirthdayYearHeader = () => { return ( {'出生那一年'} ) } _renderBirthdayYearDate = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.birthdayDate() return this._renderItem('日期', DateHelper.getStringForDate(date)) } _renderBirthdayYearWeek = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.birthdayDate() const week = date.getDay() return this._renderItem('星期', LunarSolarHelper.getWeekName(week)) } _renderThisYearHeader = () => { return ( {'今年的生日'} ) } _renderThisYearDate = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.getThisYearSolarBirthdayDate() return this._renderItem('日期', DateHelper.getStringForDate(date)) } _renderThisYearWeek = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.getThisYearSolarBirthdayDate() const week = date.getDay() return this._renderItem('星期', LunarSolarHelper.getWeekName(week)) } _renderNextYearHeader = () => { return ( {'下一个生日'} ) } _renderNextYearDate = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.getNextYearSolarBirthdayDate() return this._renderItem('日期', DateHelper.getStringForDate(date)) } _renderNextYearWeek = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.getNextYearSolarBirthdayDate() const week = date.getDay() return this._renderItem('星期', LunarSolarHelper.getWeekName(week)) } _renderMoreInfoHeader = () => { return ( {'更多信息'} ) } _renderMoreInfo = () => { const data = this._getBirthdayData() if (!isObject(data)) { return null } const date = data!.birthdayDate() const eightWords = EightWordsHelper.fromDate(date) return ( {eightWords} ) } } const styles = StyleSheet.create({ scrollView: { flex: 1, }, scrollContentView: { paddingVertical: 8, }, editBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', }, editBtnTitle: { fontSize: 17, color: '#191919', }, naviBackBtn: { width: 40, height: 40, justifyContent: 'center', }, naviBackBtnImg: { width: 24, height: 24, resizeMode: 'contain', tintColor: '#191919', }, header: { width: '100%', flexDirection: 'row', alignItems: 'center', height: 60, backgroundColor: 'white', paddingHorizontal: 15, marginBottom: 8, }, name: { fontSize: 17, color: '#191919', }, tagView: { borderRadius: 3, width: 35, height: 18, marginLeft: 5, justifyContent: 'center', alignItems: 'center', }, tagTitle: { fontSize: 13, color: 'white', }, item: { width: '100%', flexDirection: 'row', height: 55, justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'white', paddingHorizontal: 15, }, leftText: { fontSize: 17, color: '#191919', }, rightText: { fontSize: 17, color: '#888888', }, itemTitleView: { height: 30, justifyContent: 'center', }, itemTitle: { fontSize: 15, color: '#999999', marginLeft: 15, }, moreInfo: { width: '100%', backgroundColor: 'white', padding: 15, }, moreInfoTitle: { fontSize: 17, color: '#888888', }, })