React-native-calendars：使用renderArrow显示前后月份异常问题

Got it, let's sort out why both arrows are displaying the previous month. The core issue here is a common mix-up with how the renderArrow prop works in most React calendar components (like react-native-calendars).

The Problem with Your Current Code #

Your renderArrow function is set up to accept two parameters (left, right), but that's not the correct signature. This prop only takes a single boolean parameter that indicates whether the arrow being rendered is the left one (for navigating to the previous month) or the right one (for the next month).

In your existing code, when the component tries to render the right arrow, it passes false as the first argument (left becomes false), but the parameter mismatch leads to your logic not behaving as expected—resulting in both arrows showing the previous month.

Corrected Code #

Here's how to adjust the renderArrow function to display the correct month on each side:

<Calendar
  onDayPress={(day) => {this.setDay(day)}}
  // `isLeftArrow` = true for left (prev month), false for right (next month)
  renderArrow={(isLeftArrow) => (
    isLeftArrow ? this.state.previousMonth : this.state.nextMonth
  )}
  pastScrollRange={0}
  markedDates={{
    [this.state.selected]: {
      selected: true,
      disableTouchEvent: true,
      selectedColor: '#C7A985'
    }
  }}
  // Add your remaining calendar props here...
/>

Why This Works #

• When the component needs the left arrow (to go to the previous month), it calls renderArrow(true), so we return this.state.previousMonth.
• When it needs the right arrow (to go to the next month), it calls renderArrow(false), so we return this.state.nextMonth.

Just double-check that this.state.previousMonth and this.state.nextMonth hold the correct formatted month values, and you should be all set!

内容的提问来源于stack exchange，提问作者Inaccessible