在差异大小设备上本地响应的弹出模式

Question

我具有锁定模式，该模式可以正常工作，但在所有尺寸的设备上看起来都不一样，我在一个实际设备（屏幕尺寸6'）和一个模拟器（屏幕尺寸4'）上进行了测试。下图显示了它在设备上的外观。

在模拟器上

在真实设备上

这是我的代码。

import React, { Component } from 'react'
import {
    Text, View,
    TextInput, StyleSheet,
    Modal, TouchableOpacity, Image, ImageBackground, FlatList
} from 'react-native'

export default class UnLock extends Component {

    constructor(props) {
        super(props);
        let _padkeys = [{ id: 7, txt: '7' }, { id: 8, txt: '8' }, { id: 9, txt: '9' },
        { id: 4, txt: '4' }, { id: 5, txt: '5' }, { id: 6, txt: '6' },
        { id: 1, txt: '1' }, { id: 2, txt: '2' }, { id: 3, txt: '3' },
        { id: -1, txt: 'Cancel' }, { id: 0, txt: '0' }, { id: -2, txt: 'Ok' }];
        this.state = {
            visibility: props.show,
            password: '',
            dataItems: _padkeys
        }
        this.buttonPressed = this.buttonPressed.bind(this);
    }

    onSubmit() {
        this.props.check(this.state.password);
        this.setState({ password: '' });
    }

    onCancel() {
        this.props.abort();
    }

    buttonPressed(val) {
        if (val === -1) {
            this.setState({ password: '' });
            this.onCancel();
        } else if (val === -2) {
            this.onSubmit();
        } else {
            let pass = this.state.password;
            this.setState({ password: pass + val });
        }
    }

    forgotPassword() {
        this.props.forgotGroupPassword();
    }

    render() {
        if (!this.props.show) {
            return null;
        }
        return (
            <View style={styles.MainContainer} >
                <Modal
                    visible={this.props.show}
                    transparent={true}
                    animationType={"fade"}
                    onRequestClose={() => { }} >
                    <View style={styles.Alert_Main_View}>
                        <ImageBackground style={{flex:1}}
                         resizeMode="stretch" source={require('@images/door_key_popup_bg.png')}>
                            <View style={{ padding: 10, marginStart: 10, flex: 1 }}>
                                <View style={{ flexDirection: 'row', justifyContent: "center", marginBottom:8 }}>
                                    <Text style={{ color: 'white', fontSize: 18 }}>Please Enter password</Text>
                                </View>
                                <View style={{ margin: 10, flex: 9 }}>
                                    {/* style={{margin:50, backgroundColor:'red', flex:1, alignItems:'center',justifyContent:'center'}}> */}
                                    <TextInput
                                        secureTextEntry={true}
                                        editable={false}
                                        style={{ backgroundColor: 'white' }}
                                        value={this.state.password} />
                                    <View>
                                        <FlatList
                                            data={this.state.dataItems}
                                            renderItem={({ item }) => (
                                                <TouchableOpacity onPress={() => this.buttonPressed(item.id)}>
                                                    <ImageBackground resizeMode="contain" style={styles.Button} source={require('@images/button_unpressed.png')}>
                                                        <Text style={styles.TextStyle}>{item.txt}</Text>
                                                    </ImageBackground>
                                                </TouchableOpacity>
                                            )}
                                            numColumns={3} />
                                    </View>
                                    <TouchableOpacity onPress={() => this.forgotPassword()}>
                                        <Text style={{ color: 'white', alignSelf: 'flex-end' }}>Forgot Password?</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </ImageBackground>
                    </View>
                </Modal>
            </View>
        )
    }
}

const styles = StyleSheet.create({

    MainContainer: {
        justifyContent: "center",
        alignItems: "center",
        // marginTop: (Platform.OS == 'ios') ? 20 : 0,
    },

    Alert_Main_View: {
        // flex: 1,
        margin: 20,
        alignItems: 'center',
        justifyContent: 'center',
        height: "60%",
        width: "80%",
    },

    TextStyle: {
        textAlign: 'center',
        fontSize: 18,
        padding: 2
    },

    Button: {
        // flex:1,
        width: 70,
        height: 50,
        margin: 5,
        padding:5,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

我尝试使用flex，但是按钮缩小了。我究竟做错了什么。我将515x395图像用作背景，将65x89图像用作按钮。提前致谢。