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

Question

我是 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>
  );
}

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>
  );
}