IOS13 modal 始终显现在最顶层

[skyliwq]

IOS13升级后 modal 始终显现在最顶层，大家有没有解决方案

[sitorhy]

Picker 弹出需要在 Modal 显示之后，使 Picker 层级覆盖 Modal

export default () =>
{
    const [modalVisible,setModalVisible]=useState(false);

    // hide picker reloaded , modal remain open after reload in anrdoid
    useEffect(()=>{
         Picker.init({pickerData:[0],selectedValue:[0]});
        if(Picker.isPickerShow())
        {
            Picker.hide();
        }
    },[]);

    return (
        <View>
            <Button onPress={()=>{
                setModalVisible(true);
            }} title="Open Picker" />

            <Modal
                transparent={true}
                visible={modalVisible}
                onShow={()=>{
                    Picker.init({
                        pickerData: [666,666,666,666,666],
                        selectedValue: [666],
                        onPickerConfirm: () => {
                            setModalVisible(false);
                        },
                        onPickerCancel: () => {
                            setModalVisible(false);
                        }
                    });
                    Picker.show();
                }}
                onDismiss={()=>{
                    Picker.hide();
                }}
            >
                <View style={{position:"absolute",flex:1,height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0.3)",justifyContent:"center"}}>
                    <Button onPress={()=>{
                        setModalVisible(false);
                        Picker.hide();
                    }} title="Close Picker"/>
                </View>
            </Modal>
        </View>
    );
}

[TigranGyozalyan]

Picker 弹出需要在 Modal 显示之后，使 Picker 层级覆盖 Modal

export default () =>
{
    const [modalVisible,setModalVisible]=useState(false);

    // hide picker reloaded , modal remain open after reload in anrdoid
    useEffect(()=>{
         Picker.init({pickerData:[0],selectedValue:[0]});
        if(Picker.isPickerShow())
        {
            Picker.hide();
        }
    },[]);

    return (
        <View>
            <Button onPress={()=>{
                setModalVisible(true);
            }} title="Open Picker" />

            <Modal
                transparent={true}
                visible={modalVisible}
                onShow={()=>{
                    Picker.init({
                        pickerData: [666,666,666,666,666],
                        selectedValue: [666],
                        onPickerConfirm: () => {
                            setModalVisible(false);
                        },
                        onPickerCancel: () => {
                            setModalVisible(false);
                        }
                    });
                    Picker.show();
                }}
                onDismiss={()=>{
                    Picker.hide();
                }}
            >
                <View style={{position:"absolute",flex:1,height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0.3)",justifyContent:"center"}}>
                    <Button onPress={()=>{
                        setModalVisible(false);
                        Picker.hide();
                    }} title="Close Picker"/>
                </View>
            </Modal>
        </View>
    );
}

This solution is working. Since the above is in chinese I will describe the issue as I had to use google translate to figure out what the answer said : D

Before iOS 13, you could render the picker above the modal and it worked just fine. However, for some reason in iOS 13 the modal just renders on top of the picker. To make it work like before, you need to use Picker.init(...) in the onShow method of the modal which is the key part. This is how the code above fixes it.