react-native-modal-datetime-picker安卓日期选择状态不更新问题
问题根因
- 跨端回调参数不一致:
react-native-modal-datetime-picker底层调用系统原生日期选择器,iOS端onChange回调第一个参数直接返回选中的Date对象;安卓端onChange回调遵循@react-native-community/datetimepicker的规范,第一个参数是原生事件对象,第二个参数才是选中的Date实例,原代码直接取第一个参数赋值,安卓端拿到的是事件对象而非日期,自然无法正确更新状态。 - 代码存在无效语法:
showDatePicker、hideDatePicker函数中写的chosenDate: ''、chosenDate: moment(date).format('DD-MM-YYYY')属于脱离对象上下文的标签语法,不会执行任何变量定义/状态更新逻辑,是完全无效的废代码。 - 状态更新时机不可靠:安卓不同系统版本的原生日期选择器触发
onChange的逻辑不一致,部分版本滑动选择时不会实时触发onChange,只有点击确认按钮才会返回最终选中值,仅依赖onChange更新状态会出现偶发不同步问题。
修复方案
- 修正
onChange回调的参数取值,兼容双端逻辑,同时过滤安卓端取消选择时返回的undefined日期值 - 删除两处无效的
chosenDate废代码 - 把最终的状态更新逻辑放到
onConfirm回调中,保证双端点击确认后才更新选中值,行为完全统一
修复后的核心实现代码:
const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [birthDate, setBirthDate] = useState(new Date()); const showDatePicker = () => { setDatePickerVisibility(true); }; const hideDatePicker = () => { setDatePickerVisibility(false); }; const handleConfirm = (date) => { // 确认选择时统一更新状态,双端行为一致 setBirthDate(date); hideDatePicker(); }; const updateBday = () => { console.log("Date", birthDate) updateDoc(doc(db, 'users', user.uid), { dateOfBirth: birthDate }).then(() => { navigation.navigate('GenderPage') }).catch((error) => { alert(error.message); }) }; return ( <View style={styles.inputView}> <TouchableOpacity style={styles.textInput} onPress={showDatePicker}> <AntDesign name="calendar" size={30} color="black" style={styles.calendarIcon} /> <DateTimePickerModal isVisible={isDatePickerVisible} mode="date" // 兼容双端参数,实现选择时实时预览效果 onChange={(event, date) => { // 安卓端触发取消操作时date为undefined,跳过无效更新 if (date) setBirthDate(date); }} onConfirm={handleConfirm} onCancel={hideDatePicker} /> <Text style={styles.dateView}> {birthDate ? moment(birthDate).format(' MMMM DD, YYYY') : '-'} </Text> </TouchableOpacity> </View> )
如果使用的是v14以上版本的react-native-modal-datetime-picker,以上写法可以直接生效,不需要额外配置。
内容的提问来源于stack exchange,提问作者RoboCop
相关产品推荐
相关产品推荐

