react-native DatePickerAndroid调起日历(一）

落日映苍穹つ 2022-04-23 13:58 293阅读 0赞

贴 代码

import React, {Component} from 'react';
    import {StyleSheet, Text, View,TouchableHighlight,DatePickerAndroid} from 'react-native';
    import { withNavigation } from 'react-navigation';
    
    class MyPage extends Component {
      static navigationOptions = {
        title: '首页'
      }
      constructor() {
        super();
        this.state = {
    
        }
      }
      setup = () => {
        this.props.navigate('SetupPage');
      }
      //进行创建时间日期选择器
      async showPicker(stateKey, options) {
        try {
          const { action } = DatePickerAndroid.open({
            // 要设置默认值为今天的话，使用`new Date()`即可。
            // 下面显示的会是2020年5月25日。月份是从0开始算的。
            date: new Date()
          }).then(({year,month,day}) => {
            if (action !== DatePickerAndroid.dismissedAction) {
              // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
              console.log(year + '-' + (month+1) + '-' + day)
            }
            })
        } catch ({code, message}) {
          alert('Cannot open date picker', code, message);
        }
      }
      render() {
        return (
          <View style={styles.container}>
            <TouchableHighlight
              onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
              <Text>点击调起日期</Text>
            </TouchableHighlight>
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        width: "100%",
        height: '100%',
        backgroundColor: '#f5f5f5',
      },
    });
    export default withNavigation(MyPage);

![图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]

这是最基础的调起，

其它请参考官网： [https://reactnative.cn/docs/timepickerandroid/][https_reactnative.cn_docs_timepickerandroid]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220309/6ce7f8f752404b0d9da7dfe7c7733fe8.png
[https_reactnative.cn_docs_timepickerandroid]: https://reactnative.cn/docs/timepickerandroid/