React Native入门篇—react-native-datepicker的安装和使用

注意：未经允许不可私自转载，违者必究

React Native官方文档：https://reactnative.cn/docs/getting-started/

react-native-datepicker官方文档：https://github.com/xgfe/react-native-datepicker

项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

安装react-native-datepicker

在项目目录下cmd里面运行以下命令：

yarn add react-native-datepicker

没有安装yarn镜像的请看教程：https://blog.csdn.net/weixin_40614372/article/details/86154119

使用方法

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import DatePicker from 'react-native-datepicker';
class Home extends Component {
    static navigationOptions = {
        title: '日期/时间选择器',
    };
    constructor(props) {
        super(props);
        this.state = {
            date: "2016-05-15"
        }
    }
    render() {
        return (
            <ScrollView>
                <Text style={{ fontSize: 30 }}>DatePicker</Text>
                <DatePicker
                    style={{ width: 200 }}
                    date={this.state.date}
                    mode="date"
                    androidMode="spinner"
                    placeholder="选择日期"
                    format="YYYY-MM-DD"
                    confirmBtnText="确定"
                    cancelBtnText="取消"
                    showIcon={false}
                    minDate="2018-05-01"
                    maxDate="2019-06-01"
                    customStyles={{
                        dateIcon: {
                        },
                        dateInput: {
                            
                        }
                    }}
                    onDateChange={(date) => { this.setState({ date: date }) }}
                />
                <DatePicker
                    style={{ width: 200 }}
                    date={this.state.date}
                    mode="datetime"
                    placeholder="选择日期/时间"
                    androidMode="spinner"
                    format="YYYY-MM-DD HH:mm"
                    confirmBtnText="确定"
                    cancelBtnText="取消"
                    minDate="2018-05-01"
                    maxDate="2019-06-01"
                    customStyles={{
                        dateIcon: {
                            position: 'absolute',
                            left: 0,
                            top: 4,
                            marginLeft: 0
                        },
                        dateInput: {
                            marginLeft: 36
                        }
                    }}
                    minuteInterval={10}
                    onDateChange={(date) => { this.setState({ date: date }) }}
                />
            </ScrollView>
        );
    }
}
export default Home;
const styles = StyleSheet.create({

});

项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

注意：未经允许不可私自转载，违者必究