带有 React Native 的 iOS 自适应布局

Question

我已经使用 react-native 工作了几个星期了，我已经到了需要支持这两个方向的地步。据称 flex-box 应该发挥它的魔力，自动调整布局以适应新的屏幕尺寸。然而 flex-box 并没有像我希望的那样处理变化，我并不是说它没有做应该做的事情，我只是说我对它不满意。

更具体地说，我找到了this example online这基本上描述了我要解决的问题(只有他们使用 native View 和自动布局来解决)。我想在设备旋转时实现布局更改(或更一般地在尺寸更改时)，类似于应用于我链接的“迷你 Instagram”示例的布局更改。

我如何使用 react-native 和 flex-box 做到这一点？我应该为不同的屏幕尺寸使用不同的组件还是有适当的方法来实现？

Answer 1

使用 React Native 实现这一目标并不需要太多工作。在这里，我试图展示与您所要求的类似的视觉布局。

我们只需要监听 onLayout View 的事件，每当方向发生变化时就会调用该事件。

通过比较 Dimension.get('window') 的高度和宽度，我们可以确定设备是纵向模式还是横向模式。这是这个的简单代码

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));
    var imagel = this.props.list[0].src;
    var landscapeView =
                        <View style={{marginTop:20, flexDirection:'row'}}>
                          <Image source={require('./flower.jpg')} style={{height:this.state.layout.height-50, width:this.state.layout.width/2}}/>
                          <View>
                            <Text style={{backgroundColor:'gray', margin:5}}> header this is landscape view </Text>
                            <Text style={{backgroundColor:'gray',margin:5}}> footer this is portrait view  </Text>
                          </View>


                        </View>
    var portraitView = <View style={{marginTop:20}}>
                        <Text style={{backgroundColor:'gray', margin:5}}> header this is landscape view </Text>
                          <Image source={require('./flower.jpg')} style={{height:200, width:this.state.layout.width}}/>
                          <Text style={{backgroundColor:'gray',margin:5}}> footer this is portrait view  </Text>
                        </View>

    var cview =null;
    if (this.state.layout.height>this.state.layout.width) {
      cview = portraitView
    }else{
      cview = landscapeView;
    }
    return(
      <View style={{backgroundColor:'red', flex:1}}   onLayout={this._onLayout}>
      {cview}
      </View>
    );
  }
}

这里发生的事情是我们正在监听事件 onLayout ，当方向发生变化时会触发该事件。然后我们有状态变量，它保存屏幕的实际高度和宽度以反射(reflect)方向变化。我们正在使用此状态高度和宽度进行 View 设计。

这里发生了两件事。

1. onLayout 在方向改变时被调用。
2. 更改状态值后， View 将再次呈现。