"react-native-modal-datetime-picker" 年份列表不滚动

Question

我试图自己寻找解决方案，或者至少与其他人一起寻找类似的问题，但我失败了。

将react-native-reanimated更新到2.x[=版本后出现此问题66=]。我需要它与其他组件一起工作，所以回滚选项不合适。

问题只发生在 android。有谁知道为什么会这样？

我的组件代码如下：

import PropTypes from 'prop-types';
import React, { useCallback, useMemo, useState } from 'react';
import TextInput from './TextInput';
import { View, StyleSheet } from 'react-native';
import { FAB, TouchableRipple } from 'react-native-paper';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';
import { colors } from '../../../styles/colors';
import { CalendarLinear } from '../../../config/images';
import { formatDate } from '../../../helpers';
import { typographySizes } from '../../../styles/typography.style';
import { em } from '../../../styles/sizes';

const minDate = new Date('1900-01-01');
const maxDate = new Date('2038-01-01');

const iconSize = typographySizes.small.fontSize;

const CalendarLinearIcon = () => (
  <CalendarLinear width={iconSize} height={iconSize} fill={colors.muted_dark} />
);

const TextInputDate = (props) => {
  let { value } = props;

  const {
    onChangeText,
    mode = 'date',
    min = minDate,
    max = maxDate,
    locale = 'ru-RU',
    icon = true,
    ...rest
  } = props;

  value = formatDate(value);
  const [visible, setVisible] = useState(false);

  const showPicker = useCallback(() => {
    setVisible(true);
  }, []);

  const hidePicker = useCallback(() => {
    setVisible(false);
  }, []);

  const confirmPicker = useCallback(
    (date) => {
      const value = new moment(date).format('YYYY-MM-DD');
      setVisible(false);
      onChangeText(value);
    },
    [onChangeText]
  );

  const trailingIcon = useMemo(
    () =>
      (icon && (
        <FAB small style={styles.calendarButton} icon={CalendarLinearIcon} />
      )) ||
      undefined,
    [icon]
  );

  return (
    <>
      <DateTimePickerModal
        isVisible={visible}
        value={new Date(value)}
        mode={mode}
        minimumDate={min}
        maximumDate={max}
        locale={locale}
        onConfirm={confirmPicker}
        onCancel={hidePicker}
      />
      <TouchableRipple
        onPress={showPicker}
        style={{ borderTopLeftRadius: em / 2, borderTopRightRadius: em / 2 }}
        borderless>
        <View>
          <TextInput
            {...rest}
            keyboardType={'numeric'}
            // onChangeText={onChange}
            type={'date'}
            editable={false}
            value={value}
            onFocus={showPicker}
            trailingIcon={trailingIcon}
          />
          <View style={StyleSheet.absoluteFill} />
        </View>
      </TouchableRipple>
    </>
  );
};

TextInputDate.propTypes = {
  value: PropTypes.any.isRequired,
  onChangeText: PropTypes.func.isRequired,
  mode: PropTypes.oneOf(['date', 'time', 'datetime', 'countdown']),
  min: PropTypes.instanceOf(Date),
  max: PropTypes.instanceOf(Date),
  locale: PropTypes.string,
};

const styles = {
  calendarButton: {
    backgroundColor: 'transparent',
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
    height: iconSize * 2,
    width: iconSize * 2,
  },
};

export default TextInputDate;

UPD1:

我发现这只发生在小屏幕上。显然，形成了一个嵌套的可滚​​动视图或类似的东西。

UPD2:

我试图在 codesandbox 中创建一个可重现的示例，但出现错误。我认为这是平台的一个缺陷。但是 this code 可以帮助在您的 PC 上重现此问题。

UPD3:

问题不能是最小或最大日期。此外，我不使用 time 模式。

UPD4:

显然这个问题与react-native-reanimated无关，只是巧合而已。我单独复现了这个问题，没有这个库。

我也 reported 向开发人员说明了这个问题。

UPD5:

感谢开发者的回答，我 运行 进行了额外的测试，结果发现此行为的真正原因在于 @react-native-community/datetimepicker。

standard example from the documentation 重现此行为。

我也reported向其他开发者提出了这个问题。

Answer 1

查看 documentation 中的道具，上面写着“最小日期。不适用于 Android 上的 'time' 选择器”。与“最大日期”相同。

Answer 2

开发人员 said 解决问题毫无意义...我同意他的看法，因为这不会发生在真实设备上。