-1

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

这个问题是在将react-native-reanimated更新到2.x版本后出现的。我需要它与其他组件一起使用,因此回滚选项不适合。

看起来怎么样

该问题仅发生在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:

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

UPD3:

问题不能是最小或最大日期。而且,我不使用该time模式。 在大屏幕设备上一切正常

UPD4:

显然这个问题与react-native-reanimated无关,它只是巧合。我已经单独复制了这个问题,没有这个库。

我还向开发人员报告了这个问题。

UPD5:

感谢开发人员的回答,我进行了额外的测试,结果发现这种行为的真正原因是在@react-native-community/datetimepicker.

文档中的标准示例重现了此行为。

我也向其他开发者报告了这个问题。

4

2 回答 2

-1

查看文档中的道具,它显示“最小日期。不适用于 Android 上的‘时间’选择器”。与“最大日期”相同。

于 2021-09-20T21:11:49.667 回答
-1

开发人员解决问题没有意义……我同意他的观点,因为这不会发生在真实设备上。

于 2021-11-17T09:44:04.000 回答