如何在 React Native 中处理响应式布局

Question

我正在使用

react-native-dimension

库来使我的 UI 响应如下：

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

在我的 style.js 文件中：

imageBackgroundLandscape:{
    width:height,
    height:width

},
imageBackgroundPortrait:{
    width:width,
    height:height
}

问题是当我旋转屏幕时，宽度和高度变量已经得到了以前的值！ 例如，在肖像模式下，我的变量是：

width : 800
height: 1280

当我旋转屏幕时，我的变量是：

width : 800 // previous value
height: 1280 // previous value

另外，我使用react-native-orientation来确定屏幕的模式。 我想知道当我旋转设备时如何自动更改它们的值（宽度，高度），或者是否有其他库可以实现此目的？

提前致谢。

Answer 1

我通常使用以下代码来处理

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

，并且为了优雅地管理方向，您也应该尝试 this 库。

Dimensions

在 JS 包加载到应用程序之前加载，因此建议为每个

height, width

动态获取

render

您可以在这里

阅读此内容

Answer 2

我通常使用 Flexbox 来安排组件的布局。它可以帮助他们做出反应。也许你也可以尝试一下。

使用 Flexbox 进行布局

Answer 3

您可以使用这些步骤使您的 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

Answer 4

实际上，你只完成了任务的一半。你从

width

得到了

height

和

Dimensions

，这是正确的，但是

react-native

如何理解你的方向变化？

首先，您的代码应该理解方向的变化，然后设置回调函数来更改应用程序的状态，以实现新的

width

和

height

。

糟糕的是，我不知道

react-native

是否可以通过其内置功能来理解方向的变化。因此，我使用 这个库 来理解方向变化，然后使用

setState

重新渲染代码。

当然，我将

width

和

height

放在组件的

state

内。

如果你想锁定方向变化，请使用这个库。

Answer 5

首先：

您面临这个问题是因为您忘记在方向改变时再次致电

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

Answer 6

我正在使用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;

Answer 7

反应本机响应大小🚀