react-native - React-native-calendars 使用 renderArrow 函数显示上个月和下个月而不是箭头

Question

描述 使用 renderArrow 函数显示上个月和下个月而不是箭头

预期行为 左侧显示上个月，右侧显示下个月

观察到的行为 两边都显示上个月

我的代码：

<Calendar
onDayPress={(day) => {this.setDay(day)}}
renderArrow={(left,right) => (left? {this.state.previousMonth}: {this.state.nextMonth})}
pastScrollRange={0}
markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedColor: '#C7A985'}}}
firstDay={1}
theme={{
selectedDayTextColor: 'white'
}}
/>

Answer 1

您的代码中有两点需要注意。

• renderArrow 函数包含direction一个参数，该参数随后包含值left和right

• renderArrow 函数接受 JSX 属性因此您需要以code这种方式修改您的

   <Calendar
      onDayPress={(day) => {this.setDay(day)}}
      renderArrow={this._renderArrow}
      pastScrollRange={0}
      markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedColor: '#C7A985'}}}
      firstDay={1}
      theme={{
          selectedDayTextColor: 'white'
      }}
  />
  

和函数为

 _renderArrow = (direction) => {
        if(direction === 'left') {
            return <Text>{this.state.previousMonth}</Text>
        } else {
            return <Text>{this.state.nextMonth}</Text>
        }
    }