import React from 'react' import PYAlert from '../../Common/alert/PYAlert' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {Picker} from '@react-native-picker/picker' import {isFunction} from '../../Common/tool/TypeTool' type PropsType = { onSelect: (hour: number, minute: number) => void } type StateType = { // 时 hour: number // 分 minute: number } export default class BirthdaySelectTimeAlert extends React.Component { state: StateType alertRef: PYAlert | null = null constructor(props: PropsType) { super(props) this.state = { hour: 0, minute: 0, } } render() { return ( (this.alertRef = e)} closeOnHardwareBackPress={false} closeOnTouchOutside={false} customView={this._renderCustomView()} /> ) } _renderCustomView = () => { return ( {this._renderTitle()} {this._renderPickerView()} {this._renderCancelBtn()} {this._renderSureBtn()} ) } _renderTitle = () => { return {'出生时间'} } _renderPickerView = () => { const hours = this._getHourNames() const hourViews = [] for (let i = 0; i < hours.length; i++) { const hour = hours[i] const view = this._renderItem(hour, i) hourViews.push(view) } const minutes = this._getMinuteNames() const minuteViews = [] for (let i = 0; i < minutes.length; i++) { const minute = minutes[i] const view = this._renderItem(minute, i) minuteViews.push(view) } return ( style={styles.pickerHour} mode={'dialog'} selectedValue={this.state.hour} onValueChange={this._onHourChanged.bind(this)} itemStyle={styles.item}> {hourViews} style={styles.pickerMinute} mode={'dialog'} selectedValue={this.state.minute} onValueChange={this._onMinuteChanged.bind(this)} itemStyle={styles.item}> {minuteViews} ) } _onHourChanged = (itemValue: number, itemIndex: number) => { this.setState({ hour: itemIndex, }) } _onMinuteChanged = (itemValue: number, itemIndex: number) => { this.setState({ minute: itemIndex, }) } _renderItem = (item: string, i: number) => { return } _renderCancelBtn = () => { return ( {'取消'} ) } _onPressCancelBtn = () => { this.alertRef?.hide() } _renderSureBtn = () => { return ( {'确定'} ) } _onPressSureBtn = () => { this.alertRef?.hide() isFunction(this.props.onSelect) && this.props.onSelect(this.state.hour, this.state.minute) } _getHourNames = (): Array => { const names: Array = [] const Zhi = '子丑寅卯辰巳午未申酉戌亥'.split('') for (let i = 0; i <= 23; i++) { const name = String(i).padStart(2, '0') + '(' + Zhi[Math.ceil(i / 2) % 12] + ')时' names.push(name) } return names } _getMinuteNames = (): Array => { const names: Array = [] for (let i = 0; i <= 59; i++) { const name = String(i).padStart(2, '0') + '分' names.push(name) } return names } show = (hour: number, minute: number) => { this.setState({ hour: hour, minute: minute, }) this.alertRef?.show() } } const styles = StyleSheet.create({ container: { width: 280, height: 320, borderRadius: 15, backgroundColor: 'white', alignItems: 'center', }, title: { fontSize: 20, color: '#191919', marginTop: 16, }, switchBtn: { position: 'absolute', width: 80, height: 60, right: 0, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, switchBtnTitle: { fontSize: 15, color: 'rgb(0,115,249)', }, switchBtnImg: { width: 17, height: 17, resizeMode: 'contain', tintColor: 'rgb(0,115,249)', }, cancelBtn: { position: 'absolute', width: 80, height: 40, left: 25, bottom: 20, justifyContent: 'center', alignItems: 'center', borderColor: '#eeeeee', backgroundColor: 'white', borderWidth: 1, borderRadius: 5, }, cancelBtnTitle: { fontSize: 17, color: '#191919', }, sureBtn: { position: 'absolute', width: 80, height: 40, right: 25, bottom: 20, justifyContent: 'center', alignItems: 'center', borderRadius: 5, backgroundColor: '#FFB3DB', }, sureBtnTitle: { fontSize: 17, color: 'white', }, pickerBg: { width: 320, marginTop: 10, flexDirection: 'row', justifyContent: 'center', }, pickerHour: { width: 150, }, pickerMinute: { width: 110, }, item: { fontSize: 16, paddingHorizontal: 1, }, })