封装自定义对话框组件

package-lock.json

@@ -7148,6 +7148,11 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-picker": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npm.taobao.org/react-native-picker/download/react-native-picker-4.3.7.tgz",
+      "integrity": "sha1-mELoxi/w2LZ26VFNn5FyQTwFGKg="
+    },
     "react-native-safe-area-view": {
       "version": "0.14.7",
       "resolved": "https://registry.npm.taobao.org/react-native-safe-area-view/download/react-native-safe-area-view-0.14.7.tgz",

package.json

@@ -12,6 +12,7 @@
     "react": "16.8.3",
     "react-native": "0.59.9",
     "react-native-gesture-handler": "^1.3.0",
+    "react-native-picker": "^4.3.7",
     "react-navigation": "^3.11.0",
     "react-redux": "^7.1.0",
     "redux": "^4.0.4",

readme.md

@@ -6,9 +6,13 @@
 - redux
 - redux-thunk
 - redux-logger
-- npm install --save prop-types
-
 
+- npm install --save prop-types
+- 日期组件
+- npm install react-native-picker --save
+- react-native link
+  
+  
 ## UI组件封装
 
 - 进度条

units/components/common/YRDatePicker.js

@@ -0,0 +1,147 @@
+/**
+ * Created by Arison on 2019/8/16.
+ */
+
+import React, {Component} from 'react';
+import {StyleSheet,View,Text,TouchableOpacity} from 'react-native';
+import Picker from 'react-native-picker';
+
+
+
+class YRDatePicker extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = ({
+            currentDate:this._getCurrentDate(),
+        })
+
+    }
+
+
+    //获取当前日期  格式如 2018-12-15
+    _getCurrentDate(){
+        var currDate = new Date()
+        var year = currDate.getFullYear()
+        var month = (currDate.getMonth()+1).toString()
+        month = month.padStart(2,'0')
+        var dateDay = currDate.getDate().toString()
+        dateDay = dateDay.padStart(2,'0')
+        let time = year+'-'+month+'-'+dateDay
+        return time;
+    }
+    //组装日期数据
+    _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() {
+        var year = ''
+        var month = ''
+        var day = ''
+        var dateStr = this.state.currentDate
+        //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:'确定',
+            selectedValue:[year+'年',month+'月',day+'日'],
+            pickerBg:[255,255,255,1],
+            pickerData: this._createDateData(),
+            pickerFontColor: [33, 33 ,33, 1],
+            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,
+                })
+            },
+            onPickerCancel: (pickedValue, pickedIndex) => {
+                console.log('date', pickedValue, pickedIndex);
+            },
+            onPickerSelect: (pickedValue, pickedIndex) => {
+                console.log('date', pickedValue, pickedIndex);
+            }
+        });
+        Picker.show();
+    }
+
+
+
+    render(){
+            return(
+                <View style={styles.container}>
+                    <View style={styles.content}>
+                        <Text style={styles.textStyle}>选择日期</Text>
+                        <TouchableOpacity onPress={()=>this._showDatePicker()}>
+                            <Text style={styles.textStyle}>{this.state.currentDate}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            )
+    }
+
+
+
+
+}
+
+const styles = StyleSheet.create({
+    textStyle:{
+        fontSize:18,
+    },
+    container:{
+        flex:1,
+        justifyContent:'center',
+        alignItems:'center'
+    },
+    content:{
+        width:'100%',
+        flexDirection:'row',
+        justifyContent:'space-around'
+    }
+
+})
+
+export  default YRDatePicker;

units/components/common/YRModel.js

@@ -94,15 +94,12 @@ class YRModel extends React.Component {
 const styles = StyleSheet.create({
     page:{
         flex: 1,
-
         justifyContent: 'center',
     },
     container: {
         flex: 1,
         justifyContent: 'center',
         padding: 20,
-        borderColor:"#E7E7E7",
-        borderWidth:1,
         backgroundColor: 'rgba(0, 0, 0, 0.5)'
     },
     innerContainer: {

units/components/pages/HomeScreen.js

@@ -47,7 +47,7 @@ class HomeScreen extends React.Component {
                 <Button
                     title="异步进度条"
                     onPress={() => {
-                        navigation.navigate('YRActivityIndicator', {name: '进度条'});
+                        navigation.navigate('YRDatePicker', {name: '进度条'});
                     }}
                 />
 

units/containers/AppContainer.js

@@ -4,6 +4,7 @@ import {DetailsScreen} from "../components/pages/DetailsScreen";
 import {Platform,StatusBar} from "react-native";
 import YRActivityIndicator from "../components/common/YRActivityIndicator";
 import YRModel from "../components/common/YRModel";
+import YRDatePicker from "../components/common/YRDatePicker";
 export const AppNavigator = createStackNavigator({
     Home: {
         screen: HomeScreen,
@@ -32,6 +33,9 @@ export const AppNavigator = createStackNavigator({
     },
     YRModel:{
         screen:YRModel
+    },
+    YRDatePicker:{
+        screen:YRDatePicker
     }
 }, {
     initialRouteName: 'Home',