Reagieren-Native + Flex reagiert nicht auf die Ausrichtung ändern

Es ziemlich einfach, zu reagieren, Orientierung Veränderung reagieren nativen. Jede Ansicht in reagieren nativen haben einen listener aufgerufen onLayout, die aufgerufen wird, auf Orientierung ändern. Wir müssen nur, um dies umzusetzen. Es ist besser, store-dimension in state-variable und update auf jede Orientierung ändern, so dass die re-rendering geschieht nach der änderung. Andere weisen, die wir brauchen, um neu zu laden die anzeigen zu reagieren, die änderung der Ausrichtung.

 import React, { Component } from "react";

 import { StyleSheet, Text, View, Image, Dimensions } from "react-native";

 var { height, width } = Dimensions.get("window");

export default class Com extends Component {
constructor() {
    console.log("constructor");
    super();
    this.state = {
        layout: {
            height: height,
            width: width
        }
    };
}
_onLayout = event => {
    console.log(
        "------------------------------------------------" +
            JSON.stringify(event.nativeEvent.layout)
    );

    this.setState({
        layout: {
            height: event.nativeEvent.layout.height,
            width: event.nativeEvent.layout.width
        }
    });
};

render() {
    console.log(JSON.stringify(this.props));
    return (
        <View
            style={{ backgroundColor: "red", flex: 1 }}
            onLayout={this._onLayout}
        >
            <View
                style={{
                    backgroundColor: "green",
                    height: this.state.layout.height - 10,
                    width: this.state.layout.width - 10,
                    margin: 5
                }}
            />
        </View>
    );
}
}

Können Sie reagieren-native-Orientierung zu erkennen und änderungen vornehmen, auf Orientierung ändern.

var Orientation = require('react-native-orientation');

Auch verwenden Dimension Klasse die Größe(Breite, Höhe).

Dimensions.get('window')

Diese Methoden verwenden, um mit zu spielen Orientierungen

componentDidMount() {
    Orientation.lockToPortrait(); //this will lock the view to Portrait
    //Orientation.lockToLandscape(); //this will lock the view to Landscape
    //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations
    //self = this;
    console.log('componentDidMount');
    Orientation.addOrientationListener(this._orientationDidChange);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    Orientation.getOrientation((err,orientation)=> {
        console.log("Current Device Orientation: ", orientation);
    });
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

  _orientationDidChange(orientation) {

    console.log('Orientation changed to '+orientation);
    console.log(self);

     if (orientation == 'LANDSCAPE') {
       //do something with landscape layout
       screenWidth=Dimensions.get('window').width;
       console.log('screenWidth:'+screenWidth);
     } else {
       //do something with portrait layout
       screenWidth=Dimensions.get('window').width;
       console.log('screenWidth:'+screenWidth);

     }

     self.setState({
       screenWidth:screenWidth
     });

   }

Ich benutzt das auch, aber Es ist die Leistung zu gering ist.

Hoffe, das hilft...

Für jemand mit Exponent müssen Sie nur entfernen Sie die Ausrichtung Schlüssel von Ihrem exp.json.

Appart aus der Antwort von user Rajan Twanabashu Sie können auch die reagieren-native-styleman Bibliothek zu handhaben Ausrichtung ändern, ganz einfach:

Hier ist ein Beispiel, wie Sie das tun würden:

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 Component = ({ styles })=>(
    <View style={styles.container}>
        <Text>Some Text</Text>
    </View>
);

//use `withStyles` Higher order Component.
Component = withStyles(styles)(Component);

export {
  Component
};