未在IOS中打开React本机DateTimePicker

vkc1a9a2  于 2023-01-02  发布在  React
关注(0)|答案(4)|浏览(140)

日期时间选择器不打开我使用的是带有React钩子的React原生,在Android中工作正常。但它在IOS中不打开,也不显示任何错误。

我刚刚为datepicker创建了本地组件,这样我就可以在android和ios上使用它。对于android,它运行良好IOS是问题所在,它没有响应
我做了豆荚清洁和安装也没有运气

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;
50pmv0ei

50pmv0ei1#

截至2020年6月26日,我在这个版本中遇到了同样的问题:"@react-native-community/日期时间选择器":"二、二、二"。
我刚刚添加了带有宽度的样式和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

/〉
享受编码!

qkf9rpyu

qkf9rpyu3#

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

只需将其添加到datePicker组件中就可以了;)

r1zk6ea1

r1zk6ea14#

而不是使用display='default',使用这个display='spinner'它会影响Android和iOS。

相关问题