如何初始化react-native-day-picker中的狀態？

我正在嘗試應用react-native-calendar。我的代碼是如何初始化react-native-day-picker中的狀態？

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() { ...} 
}

我的問題是我怎麼能初始化值，如發件人，收件人的startDate。那麼我應該如何解決這個問題？

來源

2016-08-22 Eric Chan

如果我們有多個箭頭函數語句，我們需要使用塊體{}。

參見Function body description of arrow functions in MDN，

在簡明體，只需要一個表達式，並且隱式返回附接。在塊體中，您必須使用顯式返回語句。

因此，您需要返回View組件，它是MyCalendar的最後一個語句。

而且爲什麼我刪除了Calendar組件的onSelectionChange {}，因爲我們可以使用簡潔的主體來表示一行語句。

一些額外的修理。

對於那些我們從不重新賦值的變量，我們應該使用const。

參考的eslint-插件反應的規則Enforce boolean attributes notation in JSX (jsx-boolean-value)，

當使用JSX一個布爾屬性，可以設置該屬性值爲true或省略值。此規則將強制執行一個或另一個到保持代碼的一致性。

那爲什麼我刪除了日曆中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作爲我的風格指南。他們幫助了很多語法錯誤檢測。

來源

2016-08-22 17:23:05

謝謝您的建議。我將它們修復爲您的推薦。順便說一句你是否熟悉date-picker插件？如果是這樣，你能幫我按照要求實施嗎？日期是從今天到365天。上面的代碼顯示約2年的日期範圍。我更新了monthCount = {12} 但仍然一樣。我的意思是如果今天是8/23/2016，顯示8/1/2016 2017年8月1日如果你能幫助我，我將不勝感激。謝謝。 –

我想你可以安裝時間包，並參考此鏈接 http://momentjs.com/docs/#/manipulating/獲取從現在開始的365天的日期，甚至是1年的日期減去1天。獲得計算日期後，將其作爲selectTo的值？ –

- </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> 
    ); 
    };

來源

2016-08-22 16:56:39

如何初始化react-native-day-picker中的狀態？

回答

相關問題