React-Native + Flex不响应方向变化

本文介绍了React-Native + Flex不响应方向变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用React-Native编写通用iPhone/iPad应用程序.但是，当方向改变时，我正在努力正确地呈现我的视图.以下是js文件的源代码:

I am writing a Universal iPhone/iPad application using React-Native. However I am struggling to render my view correctly when the orientation changes. Following is the source code for js file:

'use strict';
    var React = require('react-native');

    var {
      Text,
      View
    } = React;

    var CardView = require('./CardView');

    var styles = React.StyleSheet.create({
      container:{
        flex:1,
        backgroundColor: 'red'
      }
    });

    class MySimpleApp extends React.Component {
      render() {
         return <View style={styles.container}/>;
      }
    }

    React.AppRegistry.registerComponent('SimpleApp', () => MySimpleApp);

这是它在Portrait(正确)中的渲染方式:

This is how it renders in Portrait (which is correct):

但是，当设备旋转时.红色视图不会相应旋转.

However when the device is rotated. The red view does not rotate accordingly.

推荐答案

最简单的方法是:

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

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

    this.state = {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    }

    this.onLayout = this.onLayout.bind(this);

  }

  onLayout(e) {
    this.setState({
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    });
  }

  render() {
    return(
      <View
        onLayout={this.onLayout}
        style={{width: this.state.width}}
      >
        <Text>Layout width: {this.state.width}</Text>
      </View>
    );
  }
}

这篇关于React-Native + Flex不响应方向变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

portrait