/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ImageBackground,
TextInput,
Button,
StatusBar,
Modal,
ScrollView,
TouchableHighlight,
DeviceEventEmitter,
findNodeHandle,
UIManager
} from "react-native";
type Props = {};
export default class BirthdayModal extends Component<Props> {
state = {
text_height: -1,
modalVisible: false,
year_type: false, //true为闰年，false为平年
year_array_views: [],
year_array: [],
year_array_views_index: -1,
month_array_views: [],
month_array_views_indexs: -1,
month_array: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
day_array: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31"
],
day_array_views: [],
day_array_views_index: -1
};
render() {
return (
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({ modalVisible: false });
}}
>
<View
style={{
flex: 1,
flexDirection: "column"
}}
>
<TouchableOpacity
style={{
flex: 3.2,
backgroundColor: "rgba(0, 0, 0, 0.5)",
width: "100%"
}}
activeOpacity={1}
onPress={() =>
this.setState({
modalVisible: false
})
}
/>
<View
style={{
flex: 2,
backgroundColor: "white",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "100%"
}}
>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
}}
>
<TouchableOpacity
style={{
flex: 1
}}
activeOpacity={1}
onPress={() => this.cancel()}
>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Text
style={{
fontSize: 20,
color: "rgba(59, 59, 59, 1)",
textAlignVertical: "center"
}}
>
取消
</Text>
</View>
</TouchableOpacity>
<View style={{ flex: 3.5 }} />
<TouchableOpacity
style={{
flex: 1
}}
activeOpacity={1}
onPress={() => this.commit()}
>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Text
style={{
fontSize: 20,
color: "rgba(59, 59, 59, 1)",
textAlignVertical: "center"
}}
>
完成
</Text>
</View>
</TouchableOpacity>
</View>
<View
style={{
flex: 0.05,
width: "90%",
backgroundColor: "rgba(246, 247, 248, 1)"
}}
/>
<View
style={{
flex: 5,
flexDirection: "row"
}}
>
<View
style={{
flex: 1
}}
>
<ScrollView
style={{
flex: 1
}}
ref={view => (this.year_scroll = view)}
onLayout={() => this.year_onlayout()}
showsVerticalScrollIndicator={false}
>
{this.create_year_item()}
</ScrollView>
</View>
<View
style={{
flex: 1
}}
>
<ScrollView
ref={view => (this.month_scroll = view)}
onLayout={() => this.month_onlayout()}
style={{
flex: 1
}}
showsVerticalScrollIndicator={false}
>
{this.create_month_item()}
</ScrollView>
</View>
<View
style={{
flex: 1
}}
>
<ScrollView
ref={view => (this.day_scroll = view)}
onLayout={() => this.day__onlayout()}
style={{
flex: 1
}}
showsVerticalScrollIndicator={false}
>
{this.create_day_item()}
</ScrollView>
</View>
</View>
</View>
</View>
</Modal>
);
}
componentWillMount() {
var date = new Date();
var year = parseInt(this.props.year);
if (this.state.year_array.length == 0) {
let position = 0;
for (
let index = parseInt(year - 50);
index < parseInt(year + 10);
index++
) {
if (parseInt(year) == index) {
this.setState({
year_array_views_index: position
});
}
this.state.year_array.push(index);
position++;
}
}
console.log(parseInt(date.getDate()));
this.setState({
month_array_views_indexs: parseInt(this.props.month) - 1,
day_array_views_index: parseInt(this.props.day) - 1
});
// var hour = date.getHours().toString();
// var minute = date.getMinutes().toString();
}
year_onlayout() {
if (this.state.year_array_views_index != -1) {
this.year_scroll.scrollTo({
x: 0,
y: (this.state.text_height + 20) * this.state.year_array_views_index,
duration: 500
});
}
}
month_onlayout() {
if (this.state.month_array_views_indexs != -1) {
this.month_scroll.scrollTo({
x: 0,
y: (this.state.text_height + 20) * this.state.month_array_views_indexs,
duration: 500
});
}
}
day__onlayout() {
if (this.state.day_array_views_index != -1) {
this.day_scroll.scrollTo({
x: 0,
y: (this.state.text_height + 20) * this.state.day_array_views_index,
duration: 500
});
}
}
create_year_item() {
this.state.year_array_views = [];
for (var i = 0; i < this.state.year_array.length; i++) {
let index = i;
let textstyle = null;
if (this.state.year_array_views_index == i) {
textstyle = styles.item_text_click;
} else {
textstyle = styles.item_text;
}
this.state.year_array_views.push(
<Text
style={textstyle}
key={i}
onPress={() => this.click_year_item(index)}
onLayout={event => this.text_onLayout(event)}
>
{this.state.year_array[i]}年
</Text>
);
}
return this.state.year_array_views;
}
click_year_item(index) {
this.setState({
year_array_views_index: index,
year_type: this.getRunYear(this.state.year_array[index])
});
}
create_month_item() {
this.state.month_array_views = [];
for (var i = 0; i < this.state.month_array.length; i++) {
let index = i;
let textstyle = null;
if (this.state.month_array_views_indexs == i) {
textstyle = styles.item_text_click;
} else {
textstyle = styles.item_text;
}
this.state.month_array_views.push(
<Text
style={textstyle}
key={i}
onPress={() => this.click_month_item(index)}
>
{this.state.month_array[i]}月
</Text>
);
}
return this.state.month_array_views;
}
click_month_item(index) {
this.setState({
month_array_views_indexs: index
});
}
create_day_item() {
this.state.day_array_views = [];
var forNum = 0;
//获取月份
var month_index = this.state.month_array_views_indexs;
switch (month_index + 1) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
//31天
forNum = 31;
break;
case 4:
case 6:
case 9:
case 11:
//30天
forNum = 30;
break;
case 2:
//2月判断平年闰年
if (
this.getRunYear(
this.state.year_array[this.state.year_array_views_index]
)
) {
//闰年2月29
forNum = 29;
} else {
//平年2月28
forNum = 28;
}
break;
}
for (var i = 0; i < forNum; i++) {
//console.log(i);
let index = i;
let textstyle = null;
if (this.state.day_array_views_index == i) {
textstyle = styles.item_text_click;
} else {
textstyle = styles.item_text;
}
this.state.day_array_views.push(
<Text
style={textstyle}
key={i}
onPress={() => this.click_day_item(index)}
>
{this.state.day_array[i]}日
</Text>
);
}
return this.state.day_array_views;
}
click_day_item(index) {
this.setState({
day_array_views_index: index
});
}
text_onLayout = event => {
if (this.state.text_height == -1) {
this.setState({
text_height: event.nativeEvent.layout.height
});
} else {
}
};
commit() {
if (
this.state.year_array_views_index == -1 ||
this.state.month_array_views_indexs == -1 ||
this.state.day_array_views_index == -1
) {
alert("请选择完整日期");
} else {
var year = this.state.year_array[this.state.year_array_views_index];
var month = this.state.month_array[this.state.month_array_views_indexs];
var day = this.state.day_array[this.state.day_array_views_index];
this.props.birthdaycommit(year, month, day);
this.setModalVisible(false);
}
}
cancel() {
this.setModalVisible(false);
// alert(this.getmyDate());
}
setModalVisible(visible) {
this.setState({
modalVisible: visible
});
}
getmyDate() {
var date = new Date();
var year = date.getFullYear().toString();
var month = (date.getMonth() + 1).toString();
var day = date.getDate().toString();
var hour = date.getHours().toString();
var minute = date.getMinutes().toString();
return year + "年" + month + "月" + day + "日" + " " + hour + ":" + minute;
}
getRunYear(year) {
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
//闰年2月29
// console.log("闰年");
return true;
} else {
//平年2月28
// console.log("平年");
return false;
}
}
}
const styles = StyleSheet.create({
item_text: {
color: "rgba(77, 77, 77, 1)",
fontSize: 18,
justifyContent: "center",
alignItems: "center",
marginTop: 20,
width: "100%",
textAlignVertical: "center",
textAlign: "center"
},
item_text_click: {
color: "rgba(59, 149, 243, 1)",
fontSize: 18,
justifyContent: "center",
alignItems: "center",
marginTop: 20,
width: "100%",
textAlignVertical: "center",
textAlign: "center"
}
});