时间戳

首页 > 解决方案 > React Native - 模态 - 动态最大高度

reactjs - React Native - 模态 - 动态最大高度

问题描述

我在视图中使用模式 - 它包含一个表单。表单比视口长 - 因此，内容占据了页面的高度并滚动到视图之外。

谁能建议动态高度的最佳方法？

目前我正在使用以下方法，但如果手机方向切换则不起作用，我确定必须有更好的解决方案？

  heightScreen = () => {
    return Dimensions.get('window').height - 150;
  }  



<Modal
    isVisible={this.props.showModal}
    animationInTiming={500}
    backdropColor={'#f79431'}
    style={{  marginVertical:50, maxHeight: this.heightScreen()}}
   >

标签： reactjsreact-nativereact-native-modal

解决方案

import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';

export const useOrientation = () => {
  const [orientation, setOrientation] = useState("PORTRAIT");

  useEffect(() => {
    Dimensions.addEventListener('change', ({ window:{ width, height } }) => {
        setOrientation(width < height ? "PORTRAIT" : "LANDSCAPE")
    })
  }, []);

  return orientation;
}

您可以将此函数添加为帮助检测方向（纵向/横向）并基于此应用正确的高度。

推荐阅读