使模态响应本机响应所有设备答案

【问题标题】：make modal in react native responsive to all devices使模态响应本机响应所有设备
【发布时间】：2021-05-21 11:49:58
【问题描述】：

尝试在本机反应中创建模态。它在 iPhone 11 模拟器上使用 flex 和 width & height 以及百分比效果很好。

在 iPhone 8 plus 和 iPad 模拟器上检查时，模态看起来像所附图片。

on iPhone 8 plus simulator (the same as ipad

这是我用于样式化模态的代码：取消连接行：{ 弹性：0.2， flexDirection: '行', paddingTop: 40, marginHorizontal: '5%', marginLeft: '自动',

},
connectButtonText: {
    color: '#08A7CC',
    fontSize: 14,
    fontWeight: 'bold',
    fontFamily: '.././assets/fonts/SourceSansPro-SemiBold.ttf',
},
cancelButtonText: {
    color: '#282F39',
    fontSize: 14,
    fontWeight: 'bold',
    fontFamily: '.././assets/fonts/SourceSansPro-SemiBold.ttf',
    marginRight: 20
},
checkboxLine: {
    flex: 0.7,
    flexDirection: 'row',
    alignItems: 'center',
},
checboxStyle:{
},
showPasswordText: {
    fontWeight: 'bold',
    fontSize: 16,
    fontFamily: '.././assets/fonts/SourceSansPro-SemiBold.ttf',
},
topHeadlinePopup: {
    flex: 1,
    fontFamily: '.././assets/fonts/SourceSansPro-Regular.ttf', 
    fontSize: 22, 
},
secondHeadlinePopup: {
    fontFamily: '.././assets/fonts/SourceSansPro-SemiBold.ttf', 
    fontSize: 16, 
    lineHeight: 50, 
    opacity: 0.5,
},
modalStyle: {
    opacity: 0.5,
    backgroundColor:"#282F39",
},
innerModalStyle: {
    backgroundColor:"#FFFFFF", 
    margin: 50, 
    padding: 30, 
    flex: 1, 
    marginTop: '75%', 
    marginBottom: '75%',
    opacity: 1,
},
inputFieldPopup: {
    width: '100%', 
    borderBottomColor: '#BBBBBB', 
    borderBottomWidth: 1,
    padding: 2
},
popupContainer: {
    flex: 1,

},
popupTextInput: {
    flex: 0.15,
}

【问题讨论】：

标签： css ios react-native flexbox styles

【解决方案1】：

好的，所以我想通了。我使用尺寸来获得这样的高度：

从“react-native”导入维度；

useEffect(() => {
    const onChange = () => {
        setScreenData(Dimensions.get('window').height);
        };
        Dimensions.addEventListener('change', onChange);

        return () => {Dimensions.removeEventListener('change', onChange)};
    });

然后使用变量screenData根据屏幕大小改变Modal的高度，百分比如下：

【讨论】：