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

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

前言:

         虽然之前的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;
      }

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/996811.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存