我试图自己找到解决方案,或者至少与其他人找到类似的问题,但我失败了。
这个问题是在将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:
UPD4:
显然这个问题与react-native-reanimated无关,它只是巧合。我已经单独复制了这个问题,没有这个库。
我还向开发人员报告了这个问题。
UPD5:
感谢开发人员的回答,我进行了额外的测试,结果发现这种行为的真正原因是在@react-native-community/datetimepicker
.
文档中的标准示例重现了此行为。
我也向其他开发者报告了这个问题。