如何在 react-native-day-picker 中初始化状态？答案

【问题标题】：How to initialize state in react-native-day-picker?如何在 react-native-day-picker 中初始化状态？
【发布时间】：2016-12-29 07:17:58
【问题描述】：

我正在尝试应用 react-native-calendar。我的代码是

import React from 'react';
import {Calendar} from 'react-native-day-picker';
...
 const MyCalendar = () => (
 var from = new Date();
 from.setDate(from.getDate() - 16);
 var to = new Date();
 var startDate = new Date();
 startDate.setMonth(startDate.getMonth() + 1);
<View style={styles.container}>
            <Calendar
                monthsCount={24}
                startFormMonday={true}
                startDate={startDate}
                selectFrom={from}
                selectTo={to}
                width={350}
                onSelectionChange={(current, previous) => {
                    console.log(current, previous);
                }}
            />
        </View>;
);
export default MyCalendar;

然后我得到语法错误。但由于我们项目经理的一些要求，我不喜欢显示的样式：

class XXX extends XXXX {
constructor(...) {
}
render() { ...}
}

我的问题是如何初始化从、到、开始日期等值。那么我应该如何解决这个问题呢？

【问题讨论】：

标签： typescript react-native

【解决方案1】：

如果我们有多个箭头函数的语句，我们需要使用块体{}。

参考Function body description of arrow functions in MDN，

简洁的正文只需要一个表达式，一个隐含的附上退货。在块体中，您必须使用显式返回声明。

因此，您需要返回 View 组件，它是 MyCalendar 的最后一条语句。

这就是为什么我删除日历组件的 onSelectionChange 的 { } 的原因，因为我们可以为一行语句使用简洁的正文。

一些额外的维修。

对于那些我们从不重新赋值的变量，我们应该使用const。

参考Enforce boolean attributes notation in JSX (jsx-boolean-value)的eslint-plugin-react规则，

在 JSX 中使用布尔属性时，可以设置属性值为真或省略该值。该规则将强制执行其中一项以保持代码的一致性。

这就是为什么我在日历中删除了 startFormMonday 的真实值。

修复后的代码如下，

const MyCalendar = () => {
  const from = new Date();
  from.setDate(from.getDate() - 16);
  const to = new Date();
  let startDate = new Date();
  startDate.setMonth(startDate.getMonth() + 1);
  return (
    <View style={styles.container}>
      <Calendar
        monthsCount={24}
        startFormMonday
        startDate={startDate}
        selectFrom={from}
        selectTo={to}
        width={350}
        onSelectionChange={(current, previous) => console.log(current, previous)}
      />
    </View>
  );
};

我使用Atom 文本编辑器并使用eslint-config-airbnb 作为我的风格指南。它们对语法错误检测有很大帮助。

【讨论】：

感谢您的建议。我按照你的建议把它们修好了。顺便说一句，您熟悉日期选择器插件吗？如果是这样，你能帮我在要求下实现它吗？ Date 的时间段是从今天到 365 天。上面的代码显示了大约 2 年的日期范围。我更新了 monthCount={12} 但还是一样。我的意思是如果今天是 8/23/2016，显示 8/1/2016 ~ 8/1/2017 如果你能帮助我，我将不胜感激。谢谢。
我想你可以安装moment包并参考这个链接momentjs.com/docs/#/manipulating来得到从现在起365天的日期，甚至1年的日期减去1天。得到计算的日期后，将其作为 selectTo 的值？

【解决方案2】：

- </View>; you can't have semicolon after tags
- You have to write views in return(...)
- Now you can call myCalender from class

 const MyCalendar = function () {
        var from = new Date();
     from.setDate(from.getDate() - 16);
     var to = new Date();
     var startDate = new Date();
     startDate.setMonth(startDate.getMonth() + 1);
    return(
    <View style={styles.container}>
                <Calendar
                    monthsCount={24}
                    startFormMonday={true}
                    startDate={startDate}
                    selectFrom={from}
                    selectTo={to}
                    width={350}
                    onSelectionChange={(current, previous) => {
                        console.log(current, previous);
                    }}
                />
            </View>
    );
    };

【讨论】：