当设备在 React Native 中处于 PORTRAIT UPSIDE DOWN 时出现设计问题

Question

我正在开发 React 本机项目，我的问题是当我尝试将方向从 LANDSCAPE 更改为 PORTRAIT 时遇到一些设计问题，尤其是当设备从 LANDSCAPE 转为 PORTRAIT UPSIDEDOWN 时。

这是我的代码：

class Exm extends Component {
  constructor() {
    super();
    const init = Orientation.getInitialOrientation();
    this.state = {
      init,
      or: init,
      sor: init,

      emailId: '',
      password:'',
      Token:'',
      orientation:'',
      Spinner:false,
      userId:null,
      isDisabled:false

    };
    this._updateOrientation = this._updateOrientation.bind(this);
    Orientation.addOrientationListener(this._updateOrientation);
    this._updateSpecificOrientation = this._updateSpecificOrientation.bind(this);
    Orientation.addSpecificOrientationListener(this._updateSpecificOrientation);
  }

  _updateOrientation(or) {
   // alert("HI")
    this.setState({ or });

  }

  _updateSpecificOrientation(sor) {
    //alert("HELLO")
    this.setState({ sor });
  }

  render() {
    console.log("Type Of Orientation:"+this.state.init+','+this.state.or+','+this.state.sor);
    const { init, or, sor} = this.state;
    return (
        <View style={styles.container}>
        {this.state.sor=="PORTRAIT"  ?(
          <View style={{flex:1}}>
             <Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
            <View style={{flex:1}}>
                <View style={{flex:0.5,justifyContent:"flex-end"}}>
                  <Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
                    <TouchableOpacity onPress={this.onClick.bind(this)}>
                     <View style={styles.button1}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
                     </View>
                     </TouchableOpacity>
               </View>
                <View style={{flex:0.5}}>
                    <TouchableOpacity onPress={this.onClick1.bind(this)}>
                    <View style={styles.button}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
                    </View>
                     </TouchableOpacity>
                </View>
            </View>
          </Image>
          </View>
          ):
          this.state.sor=="UNKNOWN" ? (
           <View style={{flex:1}}>
             <Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
            <View style={{flex:1}}>
                <View style={{flex:0.5,justifyContent:"flex-end"}}>
                  <Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
                    <TouchableOpacity onPress={this.onClick.bind(this)}>
                     <View style={styles.button1}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
                     </View>
                     </TouchableOpacity>
               </View>
                <View style={{flex:0.5}}>
                    <TouchableOpacity onPress={this.onClick1.bind(this)}>
                    <View style={styles.button}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
                    </View>
                     </TouchableOpacity>
                </View>
            </View>
          </Image>
          </View>
           ):this.state.sor=="LANDSCAPEUPSIDEDOWN" ? (
           <View style={{flex:1}}>
              <Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
              <View style={{flex:1}}>
                <View style={{flex:0.5,justifyContent:"flex-end"}}>
                  <Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
                    <TouchableOpacity onPress={this.onClick.bind(this)}>
                     <View style={styles.button1}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
                     </View>
                     </TouchableOpacity>
                 </View>
                 <View style={{flex:0.5}}>
                    <TouchableOpacity onPress={this.onClick1.bind(this)}>
                    <View style={styles.button}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
                    </View>
                     </TouchableOpacity>
                </View>
            </View>
               </Image>
            </View>
           ):
              <View style={{flex:1}}>
              <Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
              <View style={{flex:1}}>
                <View style={{flex:0.5,justifyContent:"flex-end"}}>
                  <Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
                    <TouchableOpacity onPress={this.onClick.bind(this)}>
                     <View style={styles.button1}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
                     </View>
                     </TouchableOpacity>
                 </View>
                 <View style={{flex:0.5}}>
                    <TouchableOpacity onPress={this.onClick1.bind(this)}>
                    <View style={styles.button}>
                       <Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
                    </View>
                     </TouchableOpacity>
                </View>
            </View>
               </Image>
            </View>
           }   
          </View>
           );
  }
}
 const styles = StyleSheet.create({
 container:{
  flex:1,
  backgroundColor:'#f5f5f5'
  },
  button:{
  height: 55,
  backgroundColor: 'transparent',
  borderColor: 'white',
  borderWidth: 2,
  marginRight:50,
  marginLeft:50,
  marginTop: 20,
  marginBottom:5,
  justifyContent:'center',
  alignSelf:'stretch',
  },
  button1:{
  height: 55,
  backgroundColor: 'transparent',
  borderColor: 'white',
  borderWidth: 2,    
  marginRight:50,
  marginLeft:50,
  marginBottom:5,
  justifyContent:'center',
  alignSelf:'stretch',
  },
  buttonText:{
  fontSize: 18,
  marginTop:5,
  marginBottom:5,
  textAlign:'center',
  color:'white',
  textAlignVertical:'center',

  },
  });
  module.exports = Exm;

屏幕截图在这里。 请给我建议来解决这个问题，非常感谢任何帮助

Ef.png

Answer 1

似乎Module 没有使用 ES6 语法更新。这是您可以使用的示例代码。 Demo

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

import OrientationModule from 'react-native-orientation'

class Example extends Component {
  constructor() {
    super();
    this.state = {
      orientationStatus: 'PORTRAIT'
    };
  }

  componentWillMount(){
    var Orientation = OrientationModule.getInitialOrientation()
    this.setState({
      Orientation: Orientation
    })
  }

  _orientationDidChange = (orientationStatus) => {
    this.setState({orientationStatus})
  }

  componentDidMount(){
    // Add a Listener, every time  Orientation changes this method triggers
    OrientationModule.addOrientationListener(this._orientationDidChange);
  }

  componentWillUnmount(){
      // Remove the Listener, to avoid setting a State while component was unmounted
    OrientationModule.removeOrientationListener(this._orientationDidChange);
  }

  render() {
    // You can Have your Design Logic here
    return (
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
            <Text>{this.state.orientationStatus}</Text>
        </View>
      )
  }
}


module.exports = Example

Answer 2

您为什么首先这样做，只需编写没有任何方向代码的组件，它应该会自动旋转。然后，如果您需要一些布局调整，请执行诸如宽度/高度之类的调整，或者只是检查 flexbox 模型，也许它已经拥有您需要的东西，而 react native 模仿 flexbox。从您的描述中无法判断您面临什么问题。

另外，如果你想禁用某些方向，可以在项目配置中完成

安卓 Android - disable landscape mode?

iOS https://*.com/a/24205653/1737158