react-native modal view 在调试模式下不显示

Question

我为我的 android 应用程序开发了一个自定义模式选择器，除了一件重要的事情外，它工作正常：当我处于调试模式时，它根本不工作。我只是不明白如果在生产模式下一切正常，那会怎样！

我相信我不必告诉你拥有一个有效的调试环境是多么重要，而且我不知道这里出了什么问题！ :( 我选择的调试器是 VS 代码，但当我通过普通终端和 chrome 调试器

启动应用程序时，它完全相同


import { useTheme } from '@react-navigation/native';
import  React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import {LogBox, SafeAreaView, Animated, StyleSheet, ScrollView, Switch, Button, View, Text, Image, Alert, TouchableOpacity, TouchableHighlight} from 'react-native';
import { Card } from 'react-native-elements';
import Picker from './MyPicker.js'

function Home() {
  const { colors } = useTheme();
  const navigation = useNavigation()

  const [selectedItem, setSelectedItem] = useState(null);
  const [selectedCount, setSelectedCount] = useState({key: 'Choose', value: null});

  let countItems = [{key: 'Choose', value: '0'}, {key: '1 Foo', value: '1'}, {key: '2 Foos', value: '2'}, {key: '3 Foos', value: '3'}, {key: '4 Foos', value: '4'}, {key: '5 Foos', value: '5'}, {key: '6 Foos', value: '6'}, {key: '7 Foos', value: '7'}, {key: '8 Foos', value: '8'}, {key: '9 Foos', value: '9'}, {key: '10 Foos', value: '10'}, {key: '11 Foos', value: '11'}, {key: '12 Foos', value: '12'}, {key: '13 Foos', value: '13'}, {key: '14 Foos', value: '14'}, {key: '15 Foos', value: '15'}, {key: '16 Foos', value: '16'}, {key: '17 Foos', value: '17'}, {key: '18 Foos', value: '18'}, {key: '19 Foos', value: '19'}, {key: '20 Foos', value: '20'}];


  const onPress = () => {
    console.log("navigate triggered");
    navigation.navigate("screen2")
  }

  const setItem = (value) => {
    // set parent state
    setSelectedCount(value);
    setSelectedItem(value)
    console.log("you touched option: " + value);
  }

  return (
    <View>
      <SafeAreaView>
        <ScrollView>
        
                <TouchableOpacity style={{backgroundColor:'green', width:'100%', height:30}} onPress={() => onPress() }>
                  <Text>Go to screen2</Text>
                </TouchableOpacity>
                <Card containerStyle={{backgroundColor: colors.cardBackgroundColor, borderColor: colors.borderColor, borderWidth: 2, borderRadius: 5}}>
                   
                    <View style={{width: "100%", height:10}}></View>
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View style={{width: '55%', flexDirection: 'column', justifyContent: 'space-between'}}>
                            <View style = {{  paddingLeft: 5, borderWidth: 1, borderRadius: 5}}>
                                <Picker icon='1' title='Test:' data={countItems} action={setItem} selectedItem={selectedCount} isActive={true}/>
                            </View>
                        <View style={{width: "100%", height:10}}></View>

                        <TouchableOpacity style = {styles.button} onPress={() => onPress() }>
                            <Text style = {{textAlign: 'center', color: 'white', fontSize: 11, fontWeight: 'bold'}}>
                                Add Foo(s)
                            </Text>
                        </TouchableOpacity> 
                        </View> 

                    </View>
       
          </Card>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
};

import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Pressable, FlatList} from 'react-native';
import Modal from 'react-native-modal';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useTheme} from '@react-navigation/native';


// ------------------PickerRow-----------------------------------------------------------------------
function Picker(props) {

    const { colors } = useTheme(); // works
    const theme = useTheme();
    const [selectedItem, setSelectedItem] = useState('choose');
    const [coordinates, setCoordinates] = useState({w: 100, x: 0, y: 100});
    const [isVisible, setIsVisible] = useState(false);
    const [isActive, setIsActive] = useState();

    useEffect(() => {
        setIsActive(props.isActive);
    })


    const showPicker = () => {
        
        measureView.current.measure((x, y, width, height, pageX, pageY) => {
            let coords = {w: width, x: pageX, y: pageY};
            setCoordinates(coords);
        })

        if (isActive) {
            setIsVisible(true);
        }
    }

    const setItem = (value) => {
        // set parent state
        props.action(value)
        setIsVisible(false);
    }

    const renderItem = ({item}) => {
        return <View>
                    <Pressable onPress={() => setItem(item)}>
                        <Text style={{color: colors.text, fontSize: 17, alignSelf: 'center', paddingTop: 3}}>
                            {item.key}
                        </Text>
                    </Pressable>
                </View>
    }

    const measureView = useRef();

    return (
    <Pressable 
        onPress={() => showPicker()}
        ref={view => measureView.current = view}>
      <View
            style = {{
            flexDirection: 'row', 
            justifyContent: 'space-between', 
            alignItems: 'center', 
            height: 25, 
        }}
        >
        { props.icon ?
        <View style = {styles.icon} >
            <Text style = {styles.text}>{props.icon}</Text>
        </View>
        : 
        <View/>
        }
        <View style = {styles.description} >
            <Text style = {{fontSize: 11, fontWeight: 'bold', color: colors.text, textAlign: 'left', marginLeft: 5,}}>{props.title}</Text>
        </View>

        {/* - - - - - Dropdown - - - - - */}
        <View style={{flex:5, backgroundColor: 'transparent'}}>
            { isActive ? 
            <TouchableOpacity onPress={showPicker}>
                <Text style={{color: colors.textSubtitleColor, fontSize: 11, alignSelf: 'flex-end', paddingRight: 10}}>
                      {props.selectedItem.key}
                </Text>
            </TouchableOpacity>
            :
            <Icon.Button
                style={{alignSelf: 'flex-end', paddingRight: 10}}
                name="lock"
                backgroundColor="transparent"
                size={12}
                onPress={() => console.log('locked')}
                color="gray"
            />
            }

            <Modal 
                isVisible={isVisible}
                style={{backgroundColor: colors.frameBackground,
                        borderColor: colors.borderColor, 
                        borderWidth: 1, 
                        borderRadius: 5,
                        position: 'absolute',
                        width: 180,
                        height: 'auto',
                        maxHeight: 200,
                        left:  coordinates.x-25,
                        top: coordinates.y+4}}
                backdropOpacity={0}
                onBackdropPress={() => setIsVisible(false)}
                >
                    <View>
                        <FlatList
                            data={props.data}
                            renderItem={renderItem}
                        />
                    </View>
            </Modal>
        </View>

      </View>
    </Pressable>
      
    );
    }
  export default Picker;

非常感谢任何帮助

Answer 1

问题出在模态本身，无论出于何种原因，来自 react-native-modal 的模态在开发者模式下存在可见性问题（或某种延迟问题）。我从 react-native 切换到标准模态，问题就解决了 ;)

react-native modal view 在调试模式下不显示

react-native modal view not showing up in debug mode

javascript

picker

modal-view

react-native