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

Question

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

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

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

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



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

Answer 1

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;
}

您可以添加这个函数作为辅助来检测方向（纵向/横向），并在此基础上应用正确的高度。