反应本机模式的行为不符合预期

问题描述

我是 React Native 的新手。我正在使用一个名为 @react-native-community/datetimepicker 的包。我有一个按钮，在按钮内我创建了一个模态。当用户单击按钮时，它将打开模态。我的逻辑工作正常，但问题是我的模态行为很奇怪。当我打开和关闭模态时，一直弹出一个大黑屏。我真的不知道如何修复。我按照这个 Youtube-tutorial 进行模态。我在 expo-snacks 中分享了我的代码。

这是我的全部代码

import React,{ useState } from 'react';
import { Modal,Platform,StyleSheet,Text,TouchableHighlight,View } from 'react-native';
import dayjs from 'dayjs';

import DateTimePicker from "@react-native-community/datetimepicker";



export default function App() {
  const [date,setDate] = useState(new Date());
  const [show,setshow] = useState(false);



  const onChange = (event,selectedDate) => {
    const currentDate = selectedDate || date;
    setshow(Platform.OS === `ios`);
    setDate(currentDate);
  };
  const onCancelPress = () => {

  };

  const onDonePress = () => {

  };

  return (
    <View style={{marginTop: 20}}>
 
    <TouchableHighlight
      activeOpacity={3}
      onPress={() => setshow(true)}
    >
      <View style= {{
        "flex": 1,"marginBottom": 40

      }}>
        <View>
          <Text style={{
            "paddingleft": 15,"paddingTop": 8,"paddingBottom": 35,"borderColor": `gray`,"borderWidth": 1,"borderRadius": 10,"fontSize": 20 }}> {dayjs(date).format(`DD/MM/YYYY`)} </Text>

        </View>
        <Modal
          transparent= {true}
          animationType="slide"
          visible={show}
          supportedOrientations={[`portrait`]}
          onRequestClose={() => setshow(false)} >
          <View style={{ "flex": 1 }}>
            <TouchableHighlight
              style={{
                "flex": 1,"alignItems": `flex-end`,"flexDirection": `row`
              }}
              activeOpacity={1}
              visible={show}
              onPress={() => setshow(false)}
            >
              <TouchableHighlight
                underlayColor={`#FFFFFF`}
                style={{
                  "flex": 1,"borderTopColor": `#E9E9E9`,"borderTopWidth": 1
                }}
                onPress={() => console.log(`datepicker picked`)}
              >
                <View
                  style={{
                    "backgroundColor": `#FFFFFF`,"height": 256,"overflow": `hidden`
                  }}
                >
                  <View style={{ "marginTop": 20 }}>
                    <DateTimePicker
                      value={date}
                      mode="date"
                      is24Hour={true}
                      display="default"
                      onChange={onChange}
                    />
                  </View>
                </View>
              </TouchableHighlight>
            </TouchableHighlight>
          </View>
        </Modal>
      </View>
    </TouchableHighlight>
   </View>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）