調研rn能用的月曆/日期選擇器

①rn中根本不能用antd-mobile,親測不能用！不知道https://www.jianshu.com/p/29e5f259cc9d 寫這篇文章的人用了什麼特異功能

②antd-mobile-rn 裡沒有月曆，隻有日期選擇器，但是隻能在頁面中使用，不能再元件中使用，在元件中顯示不全，可能因為是從底部彈出來吧

③react-native-calendar 月曆樣式非常不錯，但是在安卓中出現選不中日期的問題！

④最終選擇react-native-picker ,他其實就是個滾動效果元件的封裝，日期，區域都可以滾動，值都是自己傳的，以下介紹用法

git位址

npm install react-native-picker --save
react-native link  react-native-picker


import React,{ Component } from 'react';
import {
  View,
  Modal,
  Text,
  StyleSheet,
  WebView,
  TouchableOpacity,
  Image
} from 'react-native';
import { DatePicker, List, Provider,WingBlank } from '@ant-design/react-native';
import { connect } from 'react-redux';
import {scrnRatio, } from '../../utils/screenAdapter';
import moment from 'moment';
import Picker from 'react-native-picker';
class Calendars extends React.Component {
  static navigationOptions = {
    header: null,
  };
  constructor(props){
    super(props);
  }
  componentDidMount(){
    //每次進入月曆都是顯示今天而不是redux裡的值
      this.props.dispatch({
          type:'updateStates',
          payload:{
              date:moment().format("YYYY-MM-DD")
          }
      })
  }

  //組裝日期資料
  _createDateData(){
    let date = [];
    var currDate = new Date()
    var year = currDate.getFullYear()
    var month = currDate.getMonth()+1
    for(let i=1970;i<=year;i++){
        let month = [];
        for(let j = 1;j<13;j++){
            let day = [];
            if(j === 2){
                for(let k=1;k<29;k++){
                    day.push(k+'日');
                }
                //Leap day for years that are divisible by 4, such as 2000, 2004
                if(i%4 === 0){
                    day.push(29+'日');
                }
            }
            else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
                for(let k=1;k<32;k++){
                    day.push(k+'日');
                }
            }
            else{
                for(let k=1;k<31;k++){
                    day.push(k+'日');
                }
            }
            let _month = {};
            _month[j+'月'] = day;
            month.push(_month);
        }
        let _date = {};
        _date[i+'年'] = month;
        date.push(_date);
    }
    return date;
  }

  _showDatePicker() {
    const { dispatch} = this.props
    var year = ''
    var month = ''
    var day = ''
    var dateStr = moment().format("YYYY-MM-DD")
    //console.log('dateStr',dateStr)
    year = dateStr.substring(0,4)
    month = parseInt(dateStr.substring(5,7))
    day = parseInt(dateStr.substring(8,10))

    Picker.init({
      pickerTitleText:'時間選擇',
      pickerCancelBtnText:'取消',
      pickerConfirmBtnText:'确定',
      
      pickerData: this._createDateData(),
      selectedValue:[year+'年',month+'月',day+'日'],

      onPickerConfirm: (pickedValue, pickedIndex) => {
        var year = pickedValue[0].substring(0,pickedValue[0].length-1)
        var month = pickedValue[1].substring(0,pickedValue[1].length-1)
        month = month.padStart(2,'0')
        var day = pickedValue[2].substring(0,pickedValue[2].length-1)
        day = day.padStart(2,'0')
        let str = year+'-'+month+'-'+day
        // this.setState({
        // currentDate:str,
        // })
        dispatch({
            type:'updateStates',
            payload:{
                date:str
            }
        })
        
      },
    });
    Picker.show();
  }
  render() {
    console.disableYellowBox = true
    const {date} = this.props;
    // console.log(date,'date')
    return (
        <View style={{height:30*scrnRatio,width:120*scrnRatio,}}>
          <TouchableOpacity style={{flex:1,height:30*scrnRatio,flexDirection:'row',alignItems:'center',backgroundColor:'#fff',justifyContent:'center'}} onPress={()=>this._showDatePicker()}>
            <Text style={styles.txt}>{date} </Text><Image style={{width:16*scrnRatio,height:16*scrnRatio}} source={require('../../assets/expand.png')}></Image>
          </TouchableOpacity>
        </View>
        
    );
  }
}

const styles = StyleSheet.create({
  big:{
    backgroundColor:'#fff',
    flex:1, 
    flexDirection: 'row',justifyContent:'space-between',paddingTop:10*scrnRatio
  },
  txt:{
    color:'#333333',
    fontSize:14
  },
});

//目前元件中可使用的store裡狀态變量
function mapStateToProps({param}) {
    const { date } = param;
    return {
      date
    }
}
export default connect(mapStateToProps)(Calendars);