datepickerIOS 没有出现在屏幕上
datepickerIOS not coming on the screen
我有一行,点击该视图会显示日期,我想要一个日期选择器弹出并显示。
class EditProfilePicture extends React.Component {
state = {
currentDate: new Date()
};
setCurrentDateForIOS = currentDate => {
this.setState({ currentDate });
};
pickDate = () => (
<View>
{Platform.OS === "ios" ? (
<DatePickerForIOS
setCurrentDateForIOS={this.setCurrentDateForIOS}
/>
) : (
DatePickerForAndroid().then(currentDate =>
this.props.changeBirthDate({ currentDate })
)
)}
</View>
);
render() {
return (
<View>
<View style={styles.Container}>
<Text style={styles.heading}>Your birthday</Text>
<TouchableWithoutFeedback onPress={this.pickDate}>
<View style={styles.dropdown}>
<Text style={styles.textStyle}>
{DateFormatter(this.state.currentDate)}
</Text>
<Icon name="chevron-down" color={MED_GREY} />
</View>
</TouchableWithoutFeedback>
</View>
</View>
);
}
}
在 DatePickerForIOS 我有这个---
import React from "react";
import PropTypes from "prop-types";
import { DatePickerIOS } from "react-native";
const DatePickerForIOS = props => {
return (
<DatePickerIOS
date={new Date()}
mode="date"
onDateChange={() => props.setCurrentDateForIOS}
/>
);
};
DatePickerIOS.propTypes = {
setCurrentDateForIOS: PropTypes.func.isRequired
};
export default DatePickerForIOS;
虽然代码在 android 中工作正常,但在 IOS 中,屏幕最初包含 NAN/NAN/NAN 作为文本,并且在单击视图时日期选择器不会打开。
DatePickerIOS
需要成为 EditProfilePicture
的渲染函数的一部分
当前您从 TouchableWithoutFeedback
创建组件 onPress
。
你需要像 docs 说的那样做
render() {
return (
<View style={styles.container}>
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={this.setDate}
/>
</View>
)
}
您需要 hide/show 这是一个状态布尔值才能打开关闭。
在不知道您的 Android 代码的情况下,我怀疑它的行为类似于弹出模式。
另一种解决方案是使用像 react-native-modal-datetime-picker 这样的包,它在 iOS 和 Android
之间具有相同的接口
我有一行,点击该视图会显示日期,我想要一个日期选择器弹出并显示。
class EditProfilePicture extends React.Component {
state = {
currentDate: new Date()
};
setCurrentDateForIOS = currentDate => {
this.setState({ currentDate });
};
pickDate = () => (
<View>
{Platform.OS === "ios" ? (
<DatePickerForIOS
setCurrentDateForIOS={this.setCurrentDateForIOS}
/>
) : (
DatePickerForAndroid().then(currentDate =>
this.props.changeBirthDate({ currentDate })
)
)}
</View>
);
render() {
return (
<View>
<View style={styles.Container}>
<Text style={styles.heading}>Your birthday</Text>
<TouchableWithoutFeedback onPress={this.pickDate}>
<View style={styles.dropdown}>
<Text style={styles.textStyle}>
{DateFormatter(this.state.currentDate)}
</Text>
<Icon name="chevron-down" color={MED_GREY} />
</View>
</TouchableWithoutFeedback>
</View>
</View>
);
}
}
在 DatePickerForIOS 我有这个---
import React from "react";
import PropTypes from "prop-types";
import { DatePickerIOS } from "react-native";
const DatePickerForIOS = props => {
return (
<DatePickerIOS
date={new Date()}
mode="date"
onDateChange={() => props.setCurrentDateForIOS}
/>
);
};
DatePickerIOS.propTypes = {
setCurrentDateForIOS: PropTypes.func.isRequired
};
export default DatePickerForIOS;
虽然代码在 android 中工作正常,但在 IOS 中,屏幕最初包含 NAN/NAN/NAN 作为文本,并且在单击视图时日期选择器不会打开。
DatePickerIOS
需要成为 EditProfilePicture
当前您从 TouchableWithoutFeedback
创建组件 onPress
。
你需要像 docs 说的那样做
render() {
return (
<View style={styles.container}>
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={this.setDate}
/>
</View>
)
}
您需要 hide/show 这是一个状态布尔值才能打开关闭。 在不知道您的 Android 代码的情况下,我怀疑它的行为类似于弹出模式。
另一种解决方案是使用像 react-native-modal-datetime-picker 这样的包,它在 iOS 和 Android
之间具有相同的接口