React Native: 屏幕方向改变时应用不同的样式

关于使用纯组件的情况需要注意。@mridul-tripathi的答案是正确的，但如果使用了纯组件，则仅仅让父级/顶层组件响应方向变化可能是不够的。您还需要在方向变化时单独更新纯组件。

你需要使用 useWindowDimensions 这个钩子。当尺寸改变时，这个钩子会重新渲染组件并应用样式，但是 Dimensions 对象无法重新渲染组件和更改样式，它只在第一次渲染时起作用。

import { useWindowDimensions } from 'react-native';

然后解构它

const { height, width } = useWindowDimensions();

最后你可以这样做

import React from "react";
import { View, StyleSheet, useWindowDimensions } from "react-native";

const App = () => {
  const { height, width } = useWindowDimensions();
  const isPortrait = height > width;

  return (
    <View style={isPortrait ? styles.portrait : styles.landscape}>
      {/* something */}
    </View>
  );
};

const styles = StyleSheet.create({
  portrait: {},
  landscape: {},
});

export default App;

你也可以使用 scale 属性

const { scale } = useWindowDimensions();

阅读这份文档 https://reactnative.dev/docs/usewindowdimensions

我正在使用 styled-components，这是我在方向更改时重新呈现 UI 的方法。

import React, { useState } from 'react';
import { View } from 'react-native';
import { ThemeProvider } from 'styled-components';
import appTheme from 'constants/appTheme';

const App = () => {
  // Re-Layout on orientation change
  const [theme, setTheme] = useState(appTheme.getTheme());
  const onLayout = () => {
    setTheme(appTheme.getTheme());
  }

  return (
    <ThemeProvider theme={theme}>
      <View onLayout={onLayout}/>
      {/* Components */}
    </ThemeProvider>
  );
}

export default App;

即使您不使用styled-components，也可以创建一个状态并在onLayout上更新它以重新渲染UI。

我迄今为止最成功的库是：https://github.com/axilis/react-native-responsive-layout 它可以做到你所要求的，而且还有更多功能。简单的组件实现，几乎没有像一些复杂答案中那样的逻辑。我的项目使用手机、平板电脑和RNW通过网络 - 实现非常完美。此外，在调整浏览器大小时，它真正响应，并不仅限于初始渲染 - 完美地处理手机方向变化。

示例代码（将任何组件作为块的子元素）：

<Grid>
  <Section> {/* Light blue */}
    <Block xsSize="1/1" smSize="1/2" />
    <Block xsSize="1/1" smSize="1/2" />
    <Block xsSize="1/1" smSize="1/2" /> 
  </Section>
  <Section> {/* Dark blue */}
    <Block size="1/1" smSize="1/2" />
    <Block size="1/1" smSize="1/2" />
    <Block size="1/1" smSize="1/2" />
    <Block size="1/1" smSize="1/2" />
    <Block size="1/1" smSize="1/2" />
  </Section>
</Grid>

翻译成中文为：

我为我的 expo SDK36 项目编写了一个 HoC 解决方案，它支持方向更改并基于 ScreenOrientation.Orientation 值传递 props.orientation。

import React, { Component } from 'react';
import { ScreenOrientation } from 'expo';

export default function withOrientation(Component) {
  class DetectOrientation extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        orientation: '',
      };
      this.listener = this.listener.bind(this);
    }

    UNSAFE_componentWillMount() {
      this.subscription = ScreenOrientation.addOrientationChangeListener(this.listener);
    }

    componentWillUnmount() {
      ScreenOrientation.removeOrientationChangeListener(this.subscription);
    }

    listener(changeEvent) {
      const { orientationInfo } = changeEvent;
      this.setState({
        orientation: orientationInfo.orientation.split('_')[0],
      });
    }

    async componentDidMount() {
      await this.detectOrientation();
    }

    async detectOrientation() {
      const { orientation } = await ScreenOrientation.getOrientationAsync();
      this.setState({
        orientation: orientation.split('_')[0],
      });
    }

    render() {
      return (
        <Component
          {...this.props}
          {...this.state}
          onLayout={this.detectOrientation}
        />
      );
    }
  }
  return (props) => <DetectOrientation {...props} />;
}

为了实现更高效的集成，我将以下内容用作每个react-navigation屏幕的超类：

export default class BaseScreen extends Component {
  constructor(props) {
    super(props)

    const { height, width } = Dimensions.get('screen')

    // use this to avoid setState errors on unmount
    this._isMounted = false

    this.state = {
      screen: {
        orientation: width < height,
        height: height,
        width: width
      }
    }
  }

  componentDidMount() {
    this._isMounted = true
    Dimensions.addEventListener('change', () => this.updateScreen())
  }

  componentWillUnmount() {
    this._isMounted = false
    Dimensions.removeEventListener('change', () => this.updateScreen())
  }

  updateScreen = () => {
    const { height, width } = Dimensions.get('screen')

    if (this._isMounted) {
      this.setState({
        screen: {
          orientation: width < height,
          width: width, height: height
        }
      })
    }
  }

将任何根组件设置为从该组件扩展，然后从继承的根组件向您的叶子/哑组件传递屏幕状态。

此外，为了避免增加性能开销，请更改样式对象，而不是添加更多组件到混合中：

const TextObject = ({ title }) => (
  <View style={[styles.main, screen.orientation ? styles.column : styles.row]}>
    <Text style={[styles.text, screen.width > 600 ? {fontSize: 14} : null ]}>{title}</Text>
  </View>
)

const styles = StyleSheet.create({
  column: {
    flexDirection: 'column'
  },
  row: {
    flexDirection: 'row'
  },
  main: {
    justifyContent: 'flex-start'
  },
  text: {
    fontSize: 10
  }
}

我希望这能帮助到未来的任何人，你会发现它在开销方面非常优化。