React 本机模态未按预期运行

Question

我是 React Native 的新手。我正在使用一个名为 @react-native-community/datetimepicker. I have one button and inside the button I have create one Modal. when user will click the button it will open the modal. My logic works fine but the problem is my modal behave weird. when I open and close the modal one big black-screen pop up all the time. I really don't know how to fix. I followed this Youtube-tutorial for the modal. I share my code in 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>
  );
}

Answer 1

使用 TouchableOpacity 而不是 TouchableHighlight 来摆脱闪烁的黑框。

工作应用：Expo Snack

import React, { useState } from 'react';
import {
  Modal,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  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: 30 }}>
      <TouchableOpacity activeOpacity={3} onPress={() => setshow(true)}>
        <View>
          <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={false}
            animationType="slide"
            visible={false}
            onRequestClose={() => setshow(false)}>
            <View
              style={{
                flex: 1,
              }}>
              <TouchableOpacity
                style={{
                  flex: 1,
                  alignItems: `flex-end`,
                  flexDirection: `row`,
                }}
                activeOpacity={0.5}
                onPress={() => setshow(false)}>
                <TouchableOpacity
                  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}
                      />
                      <Text>hi</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              </TouchableOpacity>
            </View>
          </Modal>
          <View style={{ marginTop: 20 }}>
            <DateTimePicker
              testID="dateTimePicker"
              value={date}
              is24Hour={true}
              display="default"
              onChange={onChange}
            />
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
}

React 本机模态未按预期运行

React native modal does not behave as expected

react-native

react-native-modal