React Nativeでカスタムカレンダーを作成するには？

React Nativeでカスタムカレンダーを作成する必要があります。以下のスクリーンショットを添付しました。React Nativeでカスタムカレンダーを作成するには？

最初のものは正方形のカレンダーで、2番目のものは水平のflatListです。

これがあなたのプロジェクトだった場合の進め方をお聞かせください。

おかげで、種類よろしく、のAvinash

2017-12-28 Avinash Lingaloo

たぶん、あなたはreact-native-calendar-stripを試すことができます。私はそれを数回使ってきました。

ここで私はどのようにそれをimpelemetedです。

<CalendarStrip 
          calendarAnimation={{type: 'sequence', duration: 30}} 
          daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: 'white'}} 
          style={{height: 80, paddingTop: 20, paddingBottom: 10, marginBottom: 15}} 
          calendarHeaderStyle={{color: 'white'}} 
          calendarColor={'#7743CE'} 
          dateNumberStyle={{color: 'white'}} 
          dateNameStyle={{color: 'white'}} 
          highlightDateNumberStyle={{color: 'yellow'}} 
          highlightDateNameStyle={{color: 'yellow'}} 
          disabledDateNameStyle={{color: 'grey'}} 
          disabledDateNumberStyle={{color: 'grey'}} 
          onDateSelected={(date)=>this.dateSelected(date)} 
          datesWhitelist={datesWhitelist} 
         />

これは次のようになります。

出典

2017-12-28 09:29:29

あなたはライブラリをダウンロードすることができ、カスタムカレンダー

を作るためにいくつかの方法は、[インストールしない]、その後、独自のライブラリを作成し、あなたのコンポーネントに追加し、コードを編集しますがあります
また、レイアウトを日、週、月などにして、スクロール可能なようにスクロールビューを使用することもできます。ほとんどのライブラリは、スクロールビューも使用しています。

出典

2017-12-28 11:56:43

私は、既存のlibsを使用することが行く方法だと知っていますが、他のオプションがあるかどうかは分かりました。 –

私はあなたが私を理解できないと思う。私はあなたに既存のライブラリを使用するよう提案していません。私はあなたのコードでスタイルをダウンロードして変更できると言っています。たとえばライブラリ https://github.com/wix/react-native-calendars とこの変更されたライブラリ https://github.com/eals/react-native-calender-pn-wix-extended –

私もあなたの提案を使用します:) –

React Nativeでカスタムカレンダーを作成するには？

答えて

関連する問題