react-native-calendars 可扩展日历在本机反应中无法与 RTL 一起正常工作答案

【问题标题】：react-native-calendars ExpandableCalendar not worknig propely with RTL in react nativereact-native-calendars 可扩展日历在本机反应中无法与 RTL 一起正常工作
【发布时间】：2020-08-22 08:23:55
【问题描述】：

我正在尝试使用来自 https://github.com/wix/react-native-calendars 的 ExpandableCalendar

我的应用设置为 RTL ReactNative.I18nManager.allowRTL(true); ReactNative.I18nManager.forceRTL(true);

当日历展开并且我尝试更改月份时，它不会显示下个月或上个月的新日期，它只是显示与标题月份不同的月份名称。

但是将 RTL 设置为 false 可以解决问题。有没有不将 RTL 设置为 false 的解决方案？

通过向右/向左滑动或单击箭头更改月份更改月份后的图像：

【问题讨论】：

你能把你的代码分享到 repo 或小吃吗？

标签： javascript reactjs react-native react-native-calendars

【解决方案1】：

这是react-native-calendars 的一个已知问题。它无法正确呈现子组件（日期），或者在ReactNative.I18nManager.allowRTL(true); 时忽略它。

目前，临时的解决方案是将 flex-direction 更改为 row-reverse 并将箭头呈现在相反的方向：

<Calendar theme={'stylesheet.calendar.main': {
                        week: {
                          marginTop: 7,
                          marginBottom: 7,
                          flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-around'
                        }
                       },
                  'stylesheet.calendar.header': {
                        header: {
                           flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-between',
                          paddingLeft: 10,
                          paddingRight: 10,
                          alignItems: 'center',
                          height: 45
                        },
                        week: {
                          marginTop: 7,
                           flexDirection: isRTL ? 'row-reverse' : 'row',
                          justifyContent: 'space-around'
                        }}
                      }}
            renderArrow={direction => <Icon type="ionicon"
                                            name={direction === 'left'
                                               ? (isRTL ? 'arrow-forward' : 'arrow-back')
                                               : (isRTL ? 'arrow-back' : 'arrow-forward')}
                                               />}
    />

【讨论】：