React Native DateTimePicker在IOS上无法打开

Question

Datetime Picker无法打开 我使用react-hooks的react-native，在Android上运行良好。但在IOS上没有打开并且没有显示任何错误。

我刚刚创建了本地组件以便可以在android和ios上都使用datepicker。对于android而言一切都很顺利，而IOS是个问题，它没有反应。

我已经尝试pod clean和install，但没有成功。

const DatePicker =({}) =>{
   const [state, setState] = useState({
     date:  new Date(),
     mode: 'date',
     show: false
 });

 const showPicker = mode => {
     setState(prevState => ({
     ...prevState,
     show: Platform.OS === 'ios',
     mode
     }));
 };

 const datePicker = () => {
     showPicker('datetime');
 };


 return(
     <>
         <View>
             <View style={styles.createBorder}>
                 <TouchableHighlight
                     underlayColor={disable ? 'transperant' : ''}
                     onPress={!disable && timePicker}
                 >
                     <View style={styles.datePickerBox}>
                     <Text
                         style={[styles.datePickerText, { width: width - 60 }]}
                     >
                         {state.date}
                     </Text>
                     </View>
                 </TouchableHighlight>
             </View>
             {state.show && Platform.OS === 'ios' && (
                 <DateTimePicker
                 style={[styles.inputBackground, {width: '100%' }]}
                 value={state.date}
                 mode="datetime"
                 is24Hour={false}
                 display="default"
                 onChange={setDate}
                 />
             )}
         </View>
     </>
 );  
}  
export default DatePicker;

- Kathirpandian K

---

你有任何 Expo 项目吗？ - Sanyam Jain

抱歉，没有 Expo 项目。 - Kathirpandian K

Answer 1

我在2020年6月26日遇到了同样的问题，使用的是版本为"@react-native-community/datetimepicker": "2.2.2"。

我只是添加了宽度样式，这样datetimepicker在iOS中就显示出来了：

style={{width: 320, backgroundColor: "white"}}

我还添加了backgroundColor属性，使它变成不透明的白色。

这是我的代码：

<DateTimePicker
    value={user.birthdate ? new Date(user.birthdate) : new Date()}
    mode='date'
    display="default"
    onChange={(event, date) => {
       //...some code here
       setBirthdateTouched(true);
       setModalVisible(!modalVisible);
    }}
    style={{width: 320, backgroundColor: "white"}} //add this

/>

享受编码！

- Meo Flute

---

这个问题在版本 "@react-native-community/datetimepicker": "3.0.9" 仍然存在。这个解决方法很有帮助！ - Shanika Ediriweera

Answer 2

<DatePicker
iOSDatePickerComponent={(props) => (
                              <RNDatePicker
                                {...props}
                                display={
                                  Platform.OS === "ios" ? "spinner" : "default"
                                }
                              />
                            )} ..../>

只需要在您的日期选择器组件中添加这个代码，它就可以正常工作 ;)

- ahmed mersal

Answer 3

我刚刚转向使用react-native-modal-datetime-picker，现在它正常工作了。

- Kathirpandian K

Answer 4

不要使用 display='default'，而是使用 display='spinner'，这将影响 Android 和 iOS。

- Hamid