{"id":508,"date":"2023-02-25T14:23:52","date_gmt":"2023-02-25T06:23:52","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=508"},"modified":"2023-04-29T20:46:53","modified_gmt":"2023-04-29T12:46:53","slug":"react-native-learning-date-and-time","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-date-and-time\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u65e5\u671f\u65f6\u95f4"},"content":{"rendered":"<p>\u65e5\u671f\u3001\u65f6\u95f4\u9009\u62e9\u5668\uff1a<\/p>\n<ul>\n<li>Android \u91c7\u7528api\u7684\u5f62\u5f0f\u5b9e\u73b0<\/li>\n<li>iOS \u91c7\u7528\u7ec4\u4ef6\u7684\u5f62\u5f0f\u5b9e\u73b0<\/li>\n<\/ul>\n<p><!-- more --><\/p>\n<h2>DatePickerAndroid\u4e0eTimePickerAndroid<\/h2>\n<h3>DatePickerAndroid<\/h3>\n<p>\u6253\u5f00\u4e00\u4e2a\u6807\u51c6\u7684Android\u65e5\u671f\u9009\u62e9\u5668\u7684\u5bf9\u8bdd\u6846<\/p>\n<pre><code>static open(options: Object)<\/code><\/pre>\n<p>\u53ef\u9009\u7684options\u5bf9\u8c61\u7684key\u503c\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li><code>date<\/code> (Date\u5bf9\u8c61\u6216\u6beb\u79d2\u65f6\u95f4\u6233) &#8211; \u9ed8\u8ba4\u663e\u793a\u7684\u65e5\u671f<\/li>\n<li><code>minDate<\/code> (Date\u5bf9\u8c61\u6216\u6beb\u79d2\u65f6\u95f4\u6233) &#8211; \u53ef\u9009\u7684\u6700\u5c0f\u65e5\u671f<\/li>\n<li><code>maxDate<\/code> (Date\u5bf9\u8c61\u6216\u6beb\u79d2\u65f6\u95f4\u6233) &#8211; \u53ef\u9009\u7684\u6700\u5927\u65e5\u671f<\/li>\n<\/ul>\n<p>\u5728\u7528\u6237\u9009\u597d\u65e5\u671f\u540e\u8fd4\u56de\u4e00\u4e2aPromise\uff0c\u56de\u8c03\u53c2\u6570\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u6709action, year, month (0-11), day\u3002\u5982\u679c\u7528\u6237\u53d6\u6d88\u4e86\u5bf9\u8bdd\u6846\uff0cPromise\u4ecd\u7136\u4f1a\u6267\u884c\uff0c\u8fd4\u56de\u7684action\u4e3aDatePickerAndroid.dismissedAction\uff0c\u5176\u4ed6\u51e0\u9879\u53c2\u6570\u5219\u4e3aundefined\u3002\u6240\u4ee5\u8bf7\u5728\u4f7f\u7528\u5176\u4ed6\u503c\u4e4b\u524d\u52a1\u5fc5\u5148\u68c0\u67e5action\u7684\u503c\u3002<\/p>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u5f53Android\u624b\u673a\u64cd\u4f5c\u7cfb\u7edf\u4f4e\u4e8e5.0\u65f6\uff0c\u8bbe\u7f6e\u6700\u5c0f\u548c\u6700\u5927\u65e5\u671f\u4f1a\u5bfc\u81f4api\u5f02\u5e38\uff0c\u6700\u597d\u4e0d\u8981\u8bbe\u7f6e\uff0c\u800c\u662f\u5728\u7528\u6237\u9009\u62e9\u5b8c\u6210\u540e\u518d\u8fdb\u884c\u68c0\u67e5\uff1bapi\u4e2d\u7684open\u51fd\u6570\u6253\u5f00\u7684\u754c\u9762\u662f\u7cfb\u7edf\u7684\u754c\u9762\uff0c\u4e0d\u80fd\u8bbe\u7f6e\u5176\u4efb\u4f55\u663e\u793a\u6837\u5f0f\uff0c\u5982\u4f55\u624b\u673a\u663e\u793a\u4e0d\u540c\u662f\u56e0\u4e3a\u7cfb\u7edf\u88ab\u5382\u5546\u6df1\u5ea6\u5b9a\u5236\u3002<\/p>\n<\/blockquote>\n<h3>TimePickerAndroid<\/h3>\n<p>\u6253\u5f00\u4e00\u4e2a\u6807\u51c6\u7684Android\u65f6\u95f4\u9009\u62e9\u5668\u7684\u5bf9\u8bdd\u6846<\/p>\n<pre><code>static open(options: Object)<\/code><\/pre>\n<p>\u53ef\u9009\u7684options\u5bf9\u8c61\u7684key\u503c\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li><code>hour<\/code> (0-23) &#8211; \u8981\u663e\u793a\u7684\u5c0f\u65f6\uff0c\u9ed8\u8ba4\u4e3a\u5f53\u524d\u65f6\u95f4<\/li>\n<li><code>minute<\/code> (0-59) &#8211; \u8981\u663e\u793a\u7684\u5206\u949f\uff0c\u9ed8\u8ba4\u4e3a\u5f53\u524d\u65f6\u95f4<\/li>\n<li><code>is24Hour<\/code> (boolean) &#8211; \u5982\u679c\u8bbe\u4e3atrue\uff0c\u5219\u9009\u62e9\u5668\u4f1a\u4f7f\u752824\u5c0f\u65f6\u5236\uff1b\u5982\u679c\u8bbe\u4e3afalse\uff0c\u5219\u4f1a\u989d\u5916\u663e\u793aAM\/PM\u7684\u9009\u9879\uff1b\u5982\u679c\u4e0d\u8bbe\u5b9a\uff0c\u5219\u91c7\u53d6\u5f53\u524d\u5730\u533a\u7684\u9ed8\u8ba4\u8bbe\u7f6e<\/li>\n<\/ul>\n<p>\u5728\u7528\u6237\u9009\u597d\u65f6\u95f4\u540e\u8fd4\u56de\u4e00\u4e2aPromise\uff0c\u56de\u8c03\u53c2\u6570\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u6709action, hour (0-23), minute (0-59)\u3002\u5982\u679c\u7528\u6237\u53d6\u6d88\u4e86\u5bf9\u8bdd\u6846\uff0cPromise\u4ecd\u7136\u4f1a\u6267\u884c\uff0c\u8fd4\u56de\u7684action\u4e3a<code>TimePickerAndroid.dismissedAction<\/code>\uff0c\u5176\u4ed6\u51e0\u9879\u53c2\u6570\u5219\u4e3aundefined\u3002\u6240\u4ee5\u8bf7\u5728\u4f7f\u7528\u5176\u4ed6\u503c\u4e4b\u524d\u52a1\u5fc5\u5148\u68c0\u67e5action\u7684\u503c\u3002\u4e00\u822c\u7528<code>TimePickerAndroid.timeSetAction<\/code>\u7684\u53d6\u53cd\u6765\u5224\u65ad<\/p>\n<blockquote>\n<p>\u6ce8\u610f\uff1a<code>is24Hour<\/code>\u5728\u67d0\u4e9b\u624b\u673a\u4e0a\u4e0d\u4f1a\u4ea7\u751f\u4f5c\u7528\uff0c\u7528\u6237\u6ca1\u6709\u9009\u62e9\u65f6\u95f4\u662f\u56e0\u4e3a\u6309\u4e0b\u4e86\u8fd4\u56de\u952e\u6216\u53d6\u6d88\u952e\uff1b\u540c\u6837\u7684api\u4e2d\u7684Open\u6253\u5f00\u7684\u662f\u7cfb\u7edf\u7684\u754c\u9762\u3002<\/p>\n<\/blockquote>\n<h3>\u5b9e\u73b0<\/h3>\n<h4>index.android.js<\/h4>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    Navigator,\n    ScrollView,\n    Image,\n    AsyncStorage,\n    TouchableOpacity,\n    View,\n    Platform,\n    BackAndroid,\n    ToastAndroid,\n} from &#039;react-native&#039;;\n\nimport DatePicker from &#039;.\/DatePicker.js&#039;;\nimport TimePicker from &#039;.\/TimePicker.js&#039;;\n\nclass RNAPP extends Component {\n    render() {\n        let defaultName = &#039;Home&#039;;\n        let defaultComponent = Home;\n        return (\n            &lt;Navigator\n                initialRoute = {{ name: defaultName, component: defaultComponent }}\n                ref = &quot;navigator&quot;\n                \/\/\u914d\u7f6e\u573a\u666f\n                configureScene = {\n                    (route) =&gt; {\n                        \/\/\u8fd9\u4e2a\u662f\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u65f6\u5019\u7684\u52a8\u753b\uff0c\u5177\u4f53\u6709\u54ea\u4e9b\uff1f\u53ef\u4ee5\u770b\u8fd9\u4e2a\u76ee\u5f55\u4e0b\uff0c\u6709\u6e90\u4ee3\u7801\u7684: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n                        return Navigator.SceneConfigs.VerticalDownSwipeJump;\n                    }\n                }\n                renderScene = {\n                    (route, navigator) =&gt; {\n                        let Component = route.component;\n                        return &lt;Component {...route.params} navigator={navigator} \/&gt;\n                    }\n                }\n            \/&gt;\n        );\n    }\n\n    componentWillMount() {\n        if (Platform.OS === &#039;android&#039;) {\n            BackAndroid.addEventListener(&#039;hardwareBackPress&#039;, this.onBackAndroid);\n            \/\/BackAndroid.addEventListener(&#039;hardwareBackPress&#039;, this.onBackAndroid, true);\n        }\n    }\n\n    componentWillUnmount() {\n        if (Platform.OS === &#039;android&#039;) {\n            BackAndroid.removeEventListener(&#039;hardwareBackPress&#039;, this.onBackAndroid);\n        }\n    }\n\n    onBackAndroid = () =&gt; {\n        const navigator = this.refs.navigator;\n        const routers = navigator.getCurrentRoutes();\n        console.log(&#039;\u5f53\u524d\u8def\u7531\u957f\u5ea6\uff1a&#039; + routers.length);\n        if (routers.length &gt; 1) {\n            navigator.pop();\n            return true; \/\/\u63a5\u7ba1\u9ed8\u8ba4\u884c\u4e3a\n        } else {\n            if (this.lastBackPressed &amp;&amp; this.lastBackPressed + 2000 &gt;= Date.now()) {\n                \/\/\u6700\u8fd12\u79d2\u5185\u6309\u8fc7back\u952e\uff0c\u53ef\u4ee5\u9000\u51fa\u5e94\u7528\u3002\n                return false;\n            }\n            this.lastBackPressed = Date.now();\n            ToastAndroid.show(&#039;\u518d\u6309\u4e00\u6b21\u9000\u51fa\u5e94\u7528&#039;, ToastAndroid.SHORT);\n            return true;\n        }\n        return false; \/\/\u9ed8\u8ba4\u884c\u4e3a\n    };\n}\n\nclass Home extends Component {\n    render() {\n        return (\n            &lt;View style={styles.container}&gt;\n                &lt;View style={{marginTop: 10}}&gt;\n                    &lt;Text onPress={this.goDatePicker.bind(this) } style={styles.btn}&gt;\u65e5\u671f\u9009\u62e9&lt;\/Text&gt;\n                    &lt;Text onPress={this.goTimePicker.bind(this) } style={styles.btn}&gt;\u65f6\u95f4\u9009\u62e9&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;View style={styles.container} &gt;&lt;\/View&gt;\n                &lt;Text style={styles.author}&gt;Powered by RNAPP.CC&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n    }\n\n    goDatePicker() {\n        const { navigator } = this.props;\n        if (navigator) {\n            navigator.push({\n                name: &#039;DatePicker&#039;,\n                component: DatePicker,\n            })\n        }\n    }\n\n    goTimePicker() {\n        const { navigator } = this.props;\n        if (navigator) {\n            navigator.push({\n                name: &#039;TimePicker&#039;,\n                component: TimePicker,\n            })\n        }\n    }\n}\n\nconst styles = StyleSheet.create({\n    btn: {\n        justifyContent: &#039;flex-start&#039;,\n        backgroundColor: &#039;#FF7200&#039;,\n        height: 33,\n        textAlign: &#039;center&#039;,\n        textAlignVertical: &#039;center&#039;,\n        color: &#039;#fff&#039;,\n        marginLeft: 10,\n        marginRight: 10,\n        lineHeight: 24,\n        marginTop: 20,\n        fontSize: 18,\n    },\n    author: {\n        justifyContent: &#039;flex-end&#039;,\n        alignItems: &#039;center&#039;,\n        marginBottom: 10,\n        textAlign: &#039;center&#039;,\n    },\n    container: {\n        flex: 1,\n    },\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n<h4>DatePicker.js<\/h4>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    DatePickerAndroid,\n    View\n} from &#039;react-native&#039;;\n\nexport default class DatePicker extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            result: &#039;default&#039;,\n        };\n    }\n\n    componentWillMount() {\n        let self = this;\n        let today = new Date();\n        let theMinDate = new Date(2015, 1, 1);\n        let theMaxDate = new Date(2025, 1, 1);\n        let option = {\n            date: today,\n            minDate: theMinDate,\n            maxDate: theMaxDate,\n        };\n\n        DatePickerAndroid.open(option).then(\n            result =&gt; {\n                if (result.action === DatePickerAndroid.dismissedAction) {\n                    self.setState({\n                        result: &#039;\u7528\u6237\u6ca1\u6709\u9009\u62e9\u65e5\u671f&#039;,\n                    });\n                } else {\n                    self.setState({\n                        result: &#039;\u7528\u6237\u9009\u62e9\uff1a&#039; + result.year + &#039;\u5e74&#039; + (result.month + 1) + &#039;\u6708&#039; + result.day + &#039;\u65e5&#039;,\n                    });\n                }\n            }\n        ).catch(\n            error =&gt; {\n                console.log(&#039;\u9519\u8bef\uff1a&#039; + error);\n            }\n        );\n    }\n\n    render() {\n        return (\n            &lt;View style={styles.flex}&gt;\n                &lt;View style={[styles.flex, styles.center]}&gt;\n                    &lt;Text style={{ fontSize: 18, color: &#039;red&#039; }}&gt;{this.state.result}&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;Text style={styles.author}&gt;Powered by RNAPP.CC&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex: {\n        flex: 1,\n    },\n    center: {\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n    },\n    author: {\n        justifyContent: &#039;flex-end&#039;,\n        alignItems: &#039;center&#039;,\n        marginBottom: 10,\n        textAlign: &#039;center&#039;,\n    },\n});<\/code><\/pre>\n<h4>TimePicker.js<\/h4>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    TimePickerAndroid,\n    View\n} from &#039;react-native&#039;;\n\nexport default class TimePicker extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            result: &#039;default&#039;,\n        };\n    }\n\n    componentWillMount() {\n        let self = this;\n        let theHour = 18;\n        let theMinute = 55;\n        let is24Hour = false;\n        let option = {\n            \/\/hour: theHour,\n            \/\/minute: theMinute,\n            is24Hour: is24Hour,\n        };\n\n        TimePickerAndroid.open(option).then(\n            result =&gt; {\n                if (result.action !== TimePickerAndroid.timeSetAction) {\n                    self.setState({\n                        result: &#039;\u7528\u6237\u6ca1\u6709\u9009\u62e9\u65f6\u95f4&#039;,\n                    });\n                } else {\n                    self.setState({\n                        result: &#039;\u7528\u6237\u9009\u62e9\uff1a&#039; + result.hour + &#039;\u5c0f\u65f6&#039; + result.minute + &#039;\u5206\u949f&#039;,\n                    });\n                }\n            }\n        ).catch(\n            error =&gt; {\n                self.setState({\n                    result: &#039;\u9519\u8bef\uff1a&#039; + error,\n                });\n            }\n        );\n    }\n\n    render() {\n        return (\n            &lt;View style={styles.flex}&gt;\n                &lt;View style={[styles.flex, styles.center]}&gt;\n                    &lt;Text style={{ fontSize: 18, color: &#039;red&#039; }}&gt;{this.state.result}&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;Text style={styles.author}&gt;Powered by RNAPP.CC&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex: {\n        flex: 1,\n    },\n    center: {\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n    },\n    author: {\n        justifyContent: &#039;flex-end&#039;,\n        alignItems: &#039;center&#039;,\n        marginBottom: 10,\n        textAlign: &#039;center&#039;,\n    },\n});<\/code><\/pre>\n<h2>IOS\u65e5\u671f\u65f6\u95f4\u7ec4\u4ef6DatePickerIOS<\/h2>\n<p>\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5668\u5728iOS\u4e2d\u662f\u4ee5\u7ec4\u4ef6\u7684\u5f62\u5f0f\u5b58\u5728\uff0cDatePickerIOS\u652f\u6301View\u7ec4\u4ef6\u7684\u6240\u6709\u5c5e\u6027\uff0c\u53ef\u4ee5\u8bbe\u7f6e\u5176\u5bbd\u5ea6\u3001\u9ad8\u5ea6\u3001\u4f4d\u7f6e\u7b49\u3002<\/p>\n<p>\u8fd9\u662f\u4e00\u4e2a\u53d7\u7ea6\u675f\u7684(Controlled)\u7ec4\u4ef6\uff0c\u6240\u4ee5\u5fc5\u987b\u76d1\u542conDateChange\u56de\u8c03\u51fd\u6570\u5e76\u4e14\u53ca\u65f6\u66f4\u65b0date\u5c5e\u6027\u6765\u4f7f\u5f97\u7ec4\u4ef6\u66f4\u65b0\uff0c\u5426\u5219\u7528\u6237\u7684\u4fee\u6539\u4f1a\u7acb\u523b\u88ab\u64a4\u9500\u6765\u786e\u4fdd\u5f53\u524d\u663e\u793a\u503c\u548cprops.date\u4e00\u81f4\u3002<\/p>\n<p>\u9664\u4e86View\u7ec4\u4ef6\u7684\u5c5e\u6027\uff0cDatePickerIOS\u7ec4\u4ef6\u8fd8\u652f\u6301\u5982\u4e0b\u5c5e\u6027\uff1a<\/p>\n<ul>\n<li>`date\uff1a\u5f53\u524d\u88ab\u9009\u4e2d\u7684\u65e5\u671f\u548c\u65f6\u95f4\uff0cDate\u7c7b\u578b<\/li>\n<li><code>maximumDate<\/code><\/li>\n<li><code>minimumDate<\/code><\/li>\n<li><code>minuteInterval<\/code> (1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)\uff1a\u7528\u6765\u8bbe\u7f6e\u53ef\u9009\u7684\u6700\u5c0f\u5206\u949f\u5355\u4f4d<\/li>\n<li><code>mode<\/code> (&#8216;date&#8217;, &#8216;time&#8217;, &#8216;datetime&#8217;)\uff1a\u9009\u62e9\u5668\u6a21\u5f0f<\/li>\n<li><code>timeZoneOffsetInMinutes<\/code>\uff1a\u4ee5\u5206\u949f\u4e3a\u5355\u4f4d\u7684\u65f6\u533a\u65f6\u95f4\u5dee\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u9009\u62e9\u5668\u4f1a\u9009\u62e9\u8bbe\u5907\u7684\u9ed8\u8ba4\u65f6\u533a\u3002\u901a\u8fc7\u6b64\u53c2\u6570\uff0c\u53ef\u4ee5\u6307\u5b9a\u4e00\u4e2a\u65f6\u533a\u3002\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u8981\u4f7f\u7528\u5317\u4eac\u65f6\u95f4\uff08\u4e1c\u516b\u533a\uff09\uff0c\u53ef\u4ee5\u4f20\u90128 * 60\u3002<\/li>\n<\/ul>\n<p>DatePickerIOS\u7ec4\u4ef6\u7684\u56de\u8c03\u65b9\u6cd5\uff1a<\/p>\n<ul>\n<li><code>onDateChange<\/code>\uff1a\u5f53\u7528\u6237\u4fee\u6539\u65e5\u671f\u6216\u65f6\u95f4\u65f6\u8c03\u7528\u6b64\u56de\u8c03\u51fd\u6570\u3002\u552f\u4e00\u7684\u53c2\u6570\u662f\u4e00\u4e2aDate\u5bf9\u8c61\uff0c\u8868\u793a\u65b0\u7684\u65e5\u671f\u548c\u65f6\u95f4\uff08\u4e5f\u5c31\u662f\u7528\u6237\u9009\u62e9\u7684\uff09<\/li>\n<\/ul>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u5fc5\u987b\u8981\u628a\u4e00\u4e2a\u65e5\u671f\u7c7b\u578b\u7684\u72b6\u6001\u673a\u53d8\u91cf\u8d4b\u503c\u7ed9DatePickerIOS\u7ec4\u4ef6\u7684date\u5c5e\u6027\uff0c\u5e76\u4e14\u5728\u7528\u6237\u64cd\u4f5cDatePickerIOS\u7ec4\u4ef6\u4fee\u6539\u540e\uff0c\u7528onDateChange\u56de\u8c03\u7684\u65b0\u7684date\u53bb\u66f4\u65b0\u5bf9\u5e94\u7684\u72b6\u6001\u673a\u53d8\u91cf\uff0c\u5426\u5219\u4f1a\u51fa\u73b0\u7528\u6237\u4f7f\u7528DatePickerIOS\u7ec4\u4ef6\u4fee\u6539\u6539\u4e86\u65f6\u95f4\uff0c\u51e0\u79d2\u949f\u540e\uff0cDatePickerIOS\u7ec4\u4ef6\u53c8\u56de\u5230\u4e86\u539f\u6765\u7684\u65f6\u95f4\u7684\u60c5\u51b5\u3002<\/p>\n<\/blockquote>\n<p>\u8b66\u544a\u7684\u89e3\u51b3\u65b9\u6848\uff1a<\/p>\n<ul>\n<li>warning\uff1aInvalid prop &#8216;date&#8217; of type &#8216;Number&#8217;<\/li>\n<li>warning\uff1aRequired prop &#8216;onDateChange&#8217; was not specified<\/li>\n<\/ul>\n<p>\u8fd9\u662f\u4e00\u4e2abug\uff0c\u5347\u7ea7React Native \u52300.28\u53ca\u4ee5\u4e0a\u7248\u672c\u5373\u53ef\uff0c\u5982\u679c\u4e0d\u60f3\u5347\u7ea7\uff0c\u53ef\u4ee5\u7167\u8fd9\u4e2a\u4fee\u6539\uff1a<\/p>\n<p>\u4fee\u6539\u6587\u4ef6\uff1anode_modules\/react-native\/Libraries\/Components\/DatePicker\/DatePickerIOS.ios.js<\/p>\n<p>\u53c2\u8003\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/facebook\/react-native\/commit\/cec913e7ce05d26181ab4d46e2e41d72acdfb87d\">https:\/\/github.com\/facebook\/react-native\/commit\/cec913e7ce05d26181ab4d46e2e41d72acdfb87d<\/a><br \/>\n\u53c2\u8003\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/stackoverflow.com\/questions\/35764088\/prop-issues-with-datepickerios-in-react-native\">http:\/\/stackoverflow.com\/questions\/35764088\/prop-issues-with-datepickerios-in-react-native<\/a><\/p>\n<p>\u8303\u4f8b\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  DatePickerIOS,\n} from &#039;react-native&#039;;\n\nclass RNAPP extends Component {\n    constructor(props){\n    super(props);\n        this.state={\n            date1: new Date(),\n            date2: new Date(),\n            date3: new Date(),\n        };\n    }\n\n    \/\/const timeZoneOffsetInHours = (-1)*(new Date()).getTimezoneOffset()\/60;\n\n    onDateChange1(date){\n        this.setState({\n            date1:date,\n        });\n    }\n\n    onDateChange2(date){\n        this.setState({\n            date2:date,\n        });\n    }\n\n    onDateChange3(date){\n        this.setState({\n            date3:date,\n        });\n    }\n\n    render() {\n        return (\n            &lt;View style={styles.container}&gt;\n                &lt;DatePickerIOS style={styles.flex} date={this.state.date1} mode=&quot;datetime&quot; onDateChange={date=&gt;this.onDateChange1(date)} \/&gt;\n                &lt;DatePickerIOS style={styles.flex} date={this.state.date2} mode=&quot;time&quot; onDateChange={date=&gt;this.onDateChange2(date)} \/&gt;\n                &lt;DatePickerIOS style={styles.flex} date={this.state.date3} mode=&quot;date&quot; onDateChange={date=&gt;this.onDateChange3(date)} \/&gt;\n            &lt;\/View&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n    },\n    flex:{\n        flex:1,\n    },\n    item:{\n        marginTop:10,\n        marginLeft:5,\n        marginRight:5,\n        height:30,\n        borderWidth:1,\n        padding:6,\n        borderColor:&#039;#ddd&#039;,\n    }\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u65e5\u671f\u3001\u65f6\u95f4\u9009\u62e9\u5668\uff1a Android \u91c7\u7528api\u7684\u5f62\u5f0f\u5b9e\u73b0 iOS \u91c7\u7528\u7ec4\u4ef6\u7684\u5f62\u5f0f\u5b9e\u73b0 DatePickerAn [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-508","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=508"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/508\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}