React Native：不同的样式应用于方向变化

Question

我正在开发一个 React Native 应用程序，将其作为原生应用程序部署在 iOS 和 Android（以及 Windows，如果可能的话）上。

问题是我们希望布局 根据屏幕尺寸及其方向而有所不同。

我制作了一些返回 样式对象 并在每个组件渲染函数上调用的函数，因此我可以在应用程序启动时应用不同的样式，但是如果在应用程序初始化后方向（或屏幕大小）发生变化，它们不会重新计算或重新应用。

我已将侦听器添加到渲染的顶部，因此它会在方向更改时更新其状态（并且它会强制对应用程序的其余部分进行渲染），但子组件不会重新渲染（因为实际上 它们没有被更改）。

所以， 我的问题是： 我怎样才能使样式根据屏幕大小和方向 完全不同，就像 CSS 媒体查询（动态渲染）一样？

我已经尝试过 react-native-responsive 模块但没有运气。

谢谢！

原文由 Unapedra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后，我已经能够做到了。不知道它可能带来的性能问题，但它们应该不是问题，因为它只需要调整大小或改变方向。

我制作了一个全局控制器，其中有一个接收组件（容器、视图）并向其添加事件侦听器的函数：

 const getScreenInfo = () => {
    const dim = Dimensions.get('window');
    return dim;
}

const bindScreenDimensionsUpdate = (component) => {
    Dimensions.addEventListener('change', () => {
        try{
            component.setState({
                orientation: isPortrait() ? 'portrait' : 'landscape',
                screenWidth: getScreenInfo().width,
                screenHeight: getScreenInfo().height
            });
        }catch(e){
            // Fail silently
        }
    });
}

有了这个，当方向发生变化或窗口大小调整时，我强制重新渲染组件。

然后，在每个组件构造函数上：

 import ScreenMetrics from './globalFunctionContainer';

export default class UserList extends Component {
  constructor(props){
    super(props);

    this.state = {};

    ScreenMetrics.bindScreenDimensionsUpdate(this);
  }
}

这样，每次调整窗口大小或改变方向时都会重新渲染。

但是， 您应该注意，这必须应用于我们要 state 方向变化的每个组件，因为如果 props 容器已更新，但孩子们不会更新，他们不会被重新渲染，所以如果我们有一棵大的孩子树在听它， 这可能会导致性能 下降。

希望它可以帮助某人！

原文由 Unapedra 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果使用钩子。可以参考这个解决方案： https ://stackoverflow.com/a/61838183/5648340

应用程序的方向从纵向到横向，反之亦然是一项听起来很容易的任务，但当方向改变时必须改变视图时，在 React Native 中可能会很棘手。换句话说，可以通过考虑这两个步骤来实现为两个方向定义不同的视图。

从 React Native 导入维度

import { Dimensions } from 'react-native';

识别当前方向并相应地渲染视图

/**
 * Returns true if the screen is in portrait mode
 */
const isPortrait = () => {
    const dim = Dimensions.get('screen');
    return dim.height >= dim.width;
};

/**
 * Returns true of the screen is in landscape mode
 */
const isLandscape = () => {
    const dim = Dimensions.get('screen');
    return dim.width >= dim.height;
};

知道方向何时改变以相应地改变视图

// Event Listener for orientation changes
    Dimensions.addEventListener('change', () => {
        this.setState({
            orientation: Platform.isPortrait() ? 'portrait' : 'landscape'
        });
    });

组装所有零件

import React from 'react';
import {
  StyleSheet,
  Text,
  Dimensions,
  View
} from 'react-native';

export default class App extends React.Component {
  constructor() {
    super();

    /**
    * Returns true if the screen is in portrait mode
    */
    const isPortrait = () => {
      const dim = Dimensions.get('screen');
      return dim.height >= dim.width;
    };

    this.state = {
      orientation: isPortrait() ? 'portrait' : 'landscape'
    };

    // Event Listener for orientation changes
    Dimensions.addEventListener('change', () => {
      this.setState({
        orientation: isPortrait() ? 'portrait' : 'landscape'
      });
    });

  }

  render() {
    if (this.state.orientation === 'portrait') {
      return (
          //Render View to be displayed in portrait mode
       );
    }
    else {
      return (
        //Render View to be displayed in landscape mode
      );
    }

  }
}

由于为查看方向变化而定义的事件使用此命令“ this.setState() ”，此方法会自动再次调用“ render() ”，因此我们不必担心再次渲染它，一切都已处理完毕.

原文由 Mridul Tripathi 发布，翻译遵循 CC BY-SA 4.0 许可协议