React本机模式日期时间选择器在打开时不显示

7z5jn7bk  于 2023-05-18  发布在  React
关注(0)|答案(2)|浏览(210)

我正在构建我的第一个react原生应用程序,为了让我的应用程序正常工作,我需要使用react-native-modal-datetime-picker。这是我的代码-

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView,  } from 'react-native';
import React, {useState, useEffect, useCallback, Component} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import RNPickerSelect from 'react-native-picker-select';
import * as ImagePicker from 'expo-image-picker';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faSquare } from '@fortawesome/free-regular-svg-icons';
import * as Device from 'expo-device';
import DateTimePickerModal from 'react-native-modal-datetime-picker'

export default function Profile(props) {
  const [ openD, setOpenD ] = useState(false)
  const [ dob, setDob ] = useState(new Date())

const dateselect = (date) => {
      setDob(date)
      setOpenD(false)
    }

return (
      <View style={styles.scroll}>
          <ScrollView style={styles.scroll}>
<Text style={styles.label}>Date of Birth:</Text>
          <Pressable onPress={() => setOpenD(true)} title="date">
          <Text style={styles.input}>{ dob.toLocaleDateString() }</Text>
          </Pressable>

          <DateTimePickerModal
          isVisible={openD}
          mode="date"
          onConfirm={dateselect} 
          onCancel={() => setOpenD(false)}
          />
</ScrollView>
        <StatusBar style="auto"/>
      </View>
)
}

当我尝试打开日期选择器时,我只得到底部的确认按钮,其他没有显示。以前对我有用现在不行了我不知道该如何解决这个问题。

ctehm74n

ctehm74n1#

在我的例子中,这个问题是由我安装的库之间的不匹配引起的。我一直在使用npm,但由于某些原因,只有yarn能够以一种不间断的方式解决依赖关系。以下是我为解决这个问题所做的:
1.删除相关库:

npm remove @react-native-community/datetimepicker react-native-modal-datetime-picker

1.删除npm和yarn lock文件,以及已安装的节点模块:

rm -r node_modules
rm package-lock.json
rm yarn.lock

1.使用Yarn添加Expo:

yarn add expo

1.使用Expo CLI安装机械臂库:

expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

1.在尝试使用Expo Start运行应用程序后,我收到了其他几个库与Expo不兼容的警告。为了解决这个问题,我遵循了针对我的项目的建议的expo安装命令。请确保检查警告并按照说明操作,以确保与您的项目兼容。

jecbmhm3

jecbmhm32#

你好像少了一个结束括号。尝试在</View>之后添加)并重新加载应用程序(如果您使用的是iOS模拟器,您可以在打开应用程序的情况下在键盘上按rr)。您可能还需要重新启动捆绑器。

相关问题