适用在Android和IOS平台的React-Native日期选择插件@react-native-communitydatetimepicker的基本使用教程

前言：

         虽然之前的react-native-datepicker很好用，但是我们如果现在使用话，会给出警告信息，告诉我们现在推出了新版本的，集成了IOS和Android的新插件，datepicker未来将会不可用。所以要及时了解其替代品 @react-native-community/datetimepicker。

使用：

首先安装:
npm install @react-native-community/datetimepicker --save
or
yarn add @react-native-community/datetimepicker

RN >= 0.60
If you are using RN >= 0.60, only run npx pod-install. Then rebuild your project.
RN < 0.60
For RN < 0.60, you need to link the dependency using react-native link:
react-native link @react-native-community/datetimepicker
Then run npx pod-install and rebuild your project.
If this does not work, see Manual installation.

上面有几句官网的话，总之就是如果你的ReactNative版本大于等于0.60，就执行一下 【npm pod-install】

这里直接使用实例来演示：
导入：

import DateTimePicker from "@react-native-community/datetimepicker"

state:

state={
        obj:{
        	//我实际项目中还有其它数据，这里就删去了
            birthday:"",  //生日
        },
        date:new Date(),//给日期控件用
        show:false //是否显示时间控件
    }

上面可以看出，date的类型是Date类型，这是官网要求的，也是和之前的DatePicker插件的不同之处。

render的渲染：

render(){
        const {date, show} = this.state
        return(
            <View>
                 {/*4.0 日期选择器 开始*/}
                 <View>
                    <Button onPress={() => {this.setState({show:true})}} title="选择生日"></Button>
                    {show && (
                        <DateTimePicker
                        testID="dateTimePicker"
                        value={date}
                        mode="date"
                        minimumDate={new Date(1950, 0, 1)}
                        maximumDate={new Date()}
                        display="spinner"
                        onChange={this.handleDateChange}
                        />
                    )}
                 </View>
                 {/*4.0 日期选择器 结束*/}
            </View>
        )       
    }

看上面的DateTimePicker标签:
testID随便写；
value 值必填，且必须是Date日期对象类型；
mode 的四个值：

date" (default for iOS and Android and Windows)
“time”
“datetime” (iOS only)
“countdown” (iOS only)

minimumDate 和 maximumDate 分别是可选择的最大日期和最小日期，注意也是Date类型的；
display 是显示的样式，有四种：

“default” Show a default date picker (spinner/calendar/clock) based on mode and Android version.
“spinner”
“calendar” (only for date mode)
“clock” (only for time mode)

这里的时间控件是d出型的，需要我们设置一个Button去控制日期控件显示，所以上面有个Button按钮。

选择日期的处理函数：

 //这会自动给传两个参数，第一个是时间参数，第二个是选择的日期
    handleDateChange = (event,date) => {
        //这是设置日期,即确认按钮
        if(event.type === "set"){
            const birthday = this.dateToString(date)
            let obj = this.state.obj
            obj.birthday = birthday
            this.setState({obj,show:false})
        }else{
            //这是点击取消按钮
            this.setState({show:false})
        }
    }

    //日期转字符串的函数,自己写的
    dateToString = (date) => {
        var year = date.getFullYear();
        var month =(date.getMonth() + 1).toString();
        var day = (date.getDate()).toString();
        if (day.length == 1) {
            day = "0" + day;
        }
        if (month.length == 1) {
            month = "0" + month;
        }
        var dateTime = year + "-" + month + "-" + day;
        return dateTime;
      }

上面的代码也比较简单，结合注释应该一目了然。
基础使用到此结束，快去试试吧