React-Native + Flex未響應方向更改

Question

我正在使用React-Native編寫通用iPhone/iPad應用程序。然而，我正努力在方向改變時正確渲染我的視圖。以下是JS文件的源代碼：

'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); 

這是如何呈現在肖像（這是正確的）：

然而，當設備旋轉。紅色視圖不會相應旋轉。

Answer 1

好的。我找到了答案。需要在viewcontroller中實現以下內容並調用其中的ReactNative視圖。

- （空）didRotateFromInterfaceOrientation：（UIInterfaceOrientation）fromInterfaceOrientation

Answer 2

可以使用反應本地取向來檢測並執行與方向的變化而變化。

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

還使用返回大小（寬度，高度）的Dimension類。

Dimensions.get('window') 

使用這些方法與方向

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

    } 

我也用這個，但它的性能太低玩。

希望可以幫助...

Answer 3

在反應本機中響應方位變化非常簡單。反應本機中的每個視圖都有一個名爲onLayout的偵聽器，它會在方向更改時調用。我們只需要實現這一點。將維存儲在狀態變量中並更新每個方向更改會更好，以便在更改後重新呈現。其他方面，我們需要重新加載視圖以響應方向更改。

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> 
     </View> 
    ); 
    } 
} 

Answer 4

最簡單的方法是：

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

Answer 5

對於使用Exponent你只需要從exp.json刪除orientation關鍵人。

Answer 6

對於較新版本的陣營本土的，方向的變化並不一定觸發onLayout，但Dimensions提供了更直接相關的事件：

class App extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      width: Dimensions.get('window').width, 
      height: Dimensions.get('window').height, 
     }; 
     Dimensions.addEventListener("change", (e) => { 
      this.setState(e.window); 
     }); 
    } 
    render() { 
     return (   
      <View 
       style={{ 
        width: this.state.width, 
        height: this.state.height, 
       }} 
      > 
      </View> 
     ); 
    } 
} 

請注意，此代碼是一個應用程序的根組件。如果在應用程序中更深入地使用它，則需要包含相應的removeEventListener調用。