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

Posted 2023-02-16

【中文标题】React 本机模式的行为不符合预期

【英文标题】：React native modal does not behave as expected

【发布时间】：2021-05-09 12:48:37

【问题描述】：

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

【参考方案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>
  );

【讨论】：

刚注意到然后你回复了：D。非常感谢。