React Native Android DateTimePicker 设计
来源:互联网 发布:淘宝1次破损补寄 编辑:程序博客网 时间:2024/06/04 00:47
RN官网提供的时间控件,都是调用原生系统的时间控件,我们来简单介绍一下
Android端: DatePickerAndroid、TimePickerAndroid
Ios端:DatePickerIOS
组件具体的使用方法我就不赘述,官方文档已经很详尽,我在做双端适配遇到的问题是IOS的DatePickerIOS可以提供Date和Time的选择,但是Android并没有一个组件同时提供这两种时间类型的Picker,所以,简单做一下拼接,就做成了一个DateTimeAndroidPicker组件,代码如下:
/** Android 日期 */async disPlayDataPickerAndroid (value) { try { let hourO, minuteO = null if (value) { const datetime = new Date(value) hourO = datetime.getHours() minuteO = datetime.getMinutes() } const { action, year, month, day } = await DatePickerAndroid.open({ // 月份是从0开始算的。 date: new Date(value), minDate: value && value < new Date() ? new Date(value) : new Date() }) if (action !== DatePickerAndroid.dismissedAction) { this.pressTimeAndroid({ year, month, day, hourO, minuteO }) } } catch ({ code, message }) { // console.warn('Cannot open date picker', message); }}/** Android 时间 */pressTimeAndroid ({ year, month, day, hourO, minuteO }) { TimePickerAndroid.open({ hour: hourO || new Date().getHours(), minute: minuteO || new Date().getMinutes(), is24Hour: false }).then((actionResult) => { const { action, hour, minute } = actionResult if (action !== TimePickerAndroid.dismissedAction) { if (this.state.startModalVisible) { this.setState({ startTime: new Date(`${year}/${month + 1}/${day} ${hour}:${minute}`).getTime(), startModalVisible: false }) } else { this.setState({ endTime: new Date(`${year}/${month + 1}/${day} ${hour}:${minute}`).getTime(), endModalVisible: false }) } } })}
说白了就是在调用DatePicker,确认选择之后调用TimePicker,中间比较核心的是对minute、second数据的解析和传递
阅读全文
0 0
- React Native Android DateTimePicker 设计
- react native样式设计
- react native for android
- React-Native for Android
- react native android
- Android:React Native 随记
- React Native for Android
- React-native for Android
- react-native-android-guide
- React Native for Android
- React-Native移植-Android
- React Native Android
- Android react native 入门
- React Native For Android
- React Native Android
- React Native & Android集成
- react native android集成
- react-native-android-guide
- 团体天梯赛L1-041. 寻找250
- 算法的时间复杂度的概念
- 拉拉队排练
- PYTHON数据可视化(三)seaborn
- 团体天梯赛 L1-044. 稳赢
- React Native Android DateTimePicker 设计
- Ralph And His Magic Field
- 内部类引用外部类对象
- EnvironmentAware接口的作用
- 万年历(1900-2900之间)
- 加减乘除算24
- 提交表单的三种方式
- Zookeeper集群搭建与基本操作
- lamp 搭建php7 mysql5.6 apache2.4