React 原生模态日期时间选择器在打开时不显示

Question

我正在构建我的第一个 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>
)
}

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

Answer 1

就我而言，问题是由我安装的库之间的不匹配引起的。我一直在使用 npm，但出于某种原因，只有 yarn 才能以不间断的方式解决依赖关系。这是我为解决问题所做的工作：

1. 删除相关库：

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

2. 删除 npm 和 yarn lock 文件，以及已安装的节点模块：

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

3. 使用纱线添加世博会：

yarn add expo

4. 使用 Expo CLI 安装选择器库：

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

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

Answer 2

看起来你少了一个右括号。尝试在您的

)

之后添加一个

</View>

并重新加载应用程序（如果您使用的是 iOS 模拟器，则可以在打开应用程序的情况下按键盘上的

rr

）。您可能还需要重新启动捆绑器。