React Native Customize Selected Date New

基于 react-native-customize-selected-date 插件做的调整, 修改为横向适配平板设备

react-native-customize-selected-date 链接 https://www.npmjs.com/package/react-native-customize-selected-date

Install

npm install react-native-customize-selected-date-new --save

npm install react-native-vector-icons --save

react-native link react-native-vector-icons

Usage:

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Image } from "react-native";
import DateTime from "react-native-customize-selected-date-new";
import _ from "lodash";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: "",
    };
  }

  onChangeDate(date) {
    alert(date);
  }

  renderChildDay(day) {
    if (_.includes(["2018-11-15", "2018-12-10", "2018-12-20"], day)) {
      return (
        <Image
          source={require("./src/Images/ic_lock_green.png")}
          style={styles.icLockRed}
        />
      );
    }
    if (
      _.includes(["2018-11-16", "2018-12-12", "2018-12-21", "2018-12-18"], day)
    ) {
      return (
        <Image
          source={require("./src/Images/ic_lock_red.png")}
          style={styles.icLockRed}
        />
      );
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <DateTime
          date={this.state.time}
          changeDate={(date) => this.onChangeDate(date)}
          format="YYYY-MM-DD"
          renderChildDay={(day) => this.renderChildDay(day)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  icLockRed: {
    width: 13 / 2,
    height: 9,
    position: "absolute",
    top: 2,
    left: 1,
  },
});