我通常使用以下代码处理height, width的混淆：

//Dimensions.js
import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');

const actualDimensions =  {
  height:  (height<width) ? width : height,
  width: (width>height) ? height : width
};

export default actualDimensions;

使用actualDimensions，而不是从Dimensions中要求高度和宽度，为了优雅地管理方向，您还应该尝试使用this库。
Dimensions在JS包加载到应用程序之前加载，因此建议为每个render动态获取height, width。您可以在此处阅读

我通常使用Flexbox来安排我的组件的布局。它帮助它们响应。也许你也可以给予一试。
Layout with Flexbox

您可以使用这些步骤使UI响应。

1: use percentage whenever it's possible
  2: use the power of flexbox to make your UI grow and shrink
  3: use Dimension API

事实上，你只做对了一半的任务。你从Dimensions那里得到了width和height，这是正确的，但是react-native如何理解你的方向变化呢？
首先，您的代码应该理解方向的变化，然后设置一个回调函数来改变应用程序的状态，以实现新的width和height。
糟糕的是，我不知道react-native是否能用它的内置函数来理解方向的变化，所以我使用这个库来理解方向的变化，然后我使用setState来重新渲染代码。
当然，我把width和height放在组件的state里面。
如果要锁定方向更改，请使用this library。

首先：

你遇到这个问题是因为你忘记了在方向改变时再次调用const{width,height} = Dimensions.get('window');。为了在方向改变后得到width和height的最新值，你必须再次调用Dimensions.get('window')函数，并从它的输出中得到宽度和高度。

其次：

您可以只使用一个库（react-native-styleman），而不是使用多个库，这样您就可以非常轻松地处理此类事情：
下面是使用react-native-styleman时的代码。

import { withStyles } from 'react-native-styleman';
const styles = () => ({       
    container: {
        // your common styles here for container node.
        flex: 1,
        // lets write a media query to change background color automatically based on the device's orientation 
        '@media': [
          {
             orientation: 'landscape', // for landscape
             styles: {                 // apply following styles
                // these styles would be applied when the device is in landscape 
                // mode.
                 backgroundColor: 'green'
                 //.... more landscape related styles here...
             }
          },
          {
             orientation: 'portrait', // for portrait
             styles: {                // apply folllowing styles
                // these styles would be applied when the device is in portrait 
                // mode.
                 backgroundColor: 'red'
                 //.... more protrait related styles here...
             }
          }
        ]
    }
});

let MainComponent = ({ styles })=>(
    <View style={styles.container}>
        <Text> Hello World </Text>
    </View>
);

// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);

export {
  MainComponent
};

我使用的是react-native-responsive-screen。它也适用于方向更改
用途

import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
  listenOrientationChange as lor,
  removeOrientationListener as rol
} from 'react-native-responsive-screen';

class Login extends Component {
  componentDidMount() {
    lor(this);
  }

  componentWillUnmount() {
    rol();
  }

  render() {
    const styles = StyleSheet.create({
      container: { flex: 1 },
      textWrapper: {
        height: hp('70%'),
        width: wp('80%')
      },
      myText: { fontSize: hp('5%') }
    });

    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
          <Text style={styles.myText}>Login</Text>
        </View>
      </View>
    );
  }
}

export default Login;

最简单，React超快！

export const responsiveSize = (number) => {
  const currentScreen = Dimensions.get('window')
  return (currentScreen.height / currentScreen.width) * number
}

这个方法很神奇，因为它考虑了当前用户屏幕大小的高度和宽度--也就是屏幕的长宽比。它会让你的代码在所有屏幕上看起来都很漂亮。