React 基于原生的 DatePicker 出现在 iOS 上最小化

Posted 2023-05-07

【中文标题】React 基于原生的 DatePicker 出现在 iOS 上最小化

【英文标题】：React native-base DatePicker comes up Minimized on iOS

【发布时间】：2021-05-03 14:22:43

【问题描述】：

我正在使用原生库作为 DatePicker，它在 android 上运行良好。但是，当我通过 iPhone 上的 Expo 应用程序运行它时，单击它时它不会打开日历。相反，它会在左下角打开一个小框，然后仅当您单击它时才会打开日历。

这是当您单击 DatePicker 时发生的情况：

然后，如果您点击底部的“2021 年 1 月 29 日”框，您会看到日历，并且一切都按预期进行：

我不知道它是否相关，但似乎焦点发生了一些事情，因为在 Android 上，当您第一次从 DatePicker 打开日历时，您必须按两次日期，就像第一次一样正在将焦点重新回到应用程序上，第二个实际上是注册新闻。

这里是生成 DatePicker 的代码：

  render() 
    return (
      <Container style=styles.container>

        <Content padder style= padding: 0 >

          <View style= flexDirection: 'row' >
            <DatePicker
              defaultDate=this.state.CheckDate
              minimumDate=new Date(2018, 1, 1)
              maximumDate=new Date(2099, 12, 31)
              chosenDate=this.state.chosenDate
              // locale="en"
              modalTransparent=true
              animationType="fade"
              androidMode="default"
              placeHolderText="Select Date"
              textStyle= color: "grey" 
              // placeHolderTextStyle= color: "#d3d3d3" 
              placeHolderTextStyle= fontSize: 20, color: "#999999", textAlignVertical: "bottom" 
              onChange=this.onChangeCheckDate
              disabled=false
              value=this.state.CheckDate
            />
          </View>

        </Content>
      </Container>
    );
  

我正在使用以下版本：

   "@react-native-community/datetimepicker": "3.0.4",
   "native-base": "^2.15.2",

【问题讨论】：

你解决了吗？我也有同样的问题（

您好！你是怎么解决的？总是 ios 让我们发疯

【参考方案1】：

我想我找到了问题所在。我试图在 Exponack 中重现它，它可以在 iOS 模拟器上运行。它在 iOS 13.3 上（截至 2021 年 1 月 29 日）。在 iOS 14+ 中，他们改变了一些东西，Datepicker 不再工作。

请参阅以下内容： https://github.com/react-native-datetimepicker/datetimepicker/issues/285 [https://github.com/expo/expo/issues/11126]2

现在，您必须将“可选”显示道具传递给 DatePicker：https://github.com/react-native-datetimepicker/datetimepicker#display-optional

我发现“内联”最接近我想要的，但“微调器”是 iOS

  render() 
    return (
      <Container style=styles.container>

        <Content padder style= padding: 0 >

          <View style= flexDirection: 'row' >
            <DatePicker
              defaultDate=this.state.pregCheckDate
              minimumDate=new Date(2018, 1, 1)
              maximumDate=new Date(2099, 12, 31)
              chosenDate=this.state.chosenDate
              // locale="en"
              modalTransparent=true
              animationType="fade"
              androidMode="default"
              placeHolderText="Select Date"
              textStyle= color: "grey" 
              display="inline"
              // placeHolderTextStyle= color: "#d3d3d3" 
              placeHolderTextStyle= fontSize: 20, color: "#999999", textAlignVertical: "bottom" 
              onChange=this.onChangeCheckDate
              disabled=false
              value=this.state.pregCheckDate
            />
          </View>

        </Content>
      </Container>
    );
  

【参考方案2】：

如果您想恢复 iOS 14 上日期选择器的旧转轮，您需要明确设置它。

display="spinner"

附：这是截至 2021 年 4 月的最新变化 https://github.com/react-native-datetimepicker/datetimepicker#display-optional