基于 React-Native 中方向变化的 FlexDirection 变化

Posted 2023-03-12

【中文标题】基于 React-Native 中方向变化的 FlexDirection 变化

【英文标题】：FlexDirection Change Based on Orientation Change in React-Native

【发布时间】：2020-06-27 12:55:14

【问题描述】：

我的代码：

import React,  PureComponent  from 'react'
import  StyleSheet, View  from 'react-native'
import 
    isPortrait
 from './Constants'


export default class TwoVideoView extends PureComponent 
    render() 
        return (
            <View style=styles.conatiner>
                <View style=[styles.videoHalfView, backgroundColor: 'white']>
                </View>
                <View style=[styles.videoHalfView, backgroundColor: 'gray']>
                </View>
            </View>
        )
    


const styles = StyleSheet.create(
    conatiner: 
        flex: 1,
        backgroundColor: 'red',
        flexDirection: isPortrait ? ('column') : ('row')
    ,
    videoFullView: 
        width: '100%',
        height: '100%'
    ,
    videoHalfView: 
        width: isPortrait ? ('100%') : ('50%'),
        height: isPortrait ? ('50%') : ('100%')
    
)

人像输出：

横向输出：

预期输出：

您能帮我完成这项工作吗？

我尝试添加Dimensions.addListener('change') 没有奏效 我只想更新 My View 渲染而不是其他 Api Stuff。

我要换flexDirection: isPortrait ? ('column') : ('row')

export const isPortrait = () => 
    const dim = Dimensions.get('screen');
    return dim.height >= dim.width;
  ;

【参考方案1】：

您可以使用 onLayout 属性根据容器的宽度和高度计算布局，并提供基于此的样式。

我更新了容器样式。你可以改变其余的

const styles = StyleSheet.create(
  conatinerPortrait: 
    flex: 1,
    backgroundColor: 'red',
    flexDirection: 'column',
  ,
  conatinerLandscape: 
    flex: 1,
    backgroundColor: 'red',
    flexDirection: 'row',
  
);

class TwoVideoView extends React.PureComponent 
  state = 
    isPortrait: true,
  ;

  calculateDimensions = ( nativeEvent ) => 
    const  layout  = nativeEvent;

    if (layout.height > layout.width) 
      this.setState(
        isPortrait: true,
      );
     else 
      this.setState(
        isPortrait: false,
      );
    
  ;

  render() 
    const  isPortrait  = this.state;
    return (
      <View
        style=
          isPortrait ? styles.conatinerPortrait : styles.conatinerLandscape
        
        onLayout=this.calculateDimensions>
        <View
          style=[styles.videoHalfView,  backgroundColor: 'white' ]></View>
        <View
          style=[styles.videoHalfView,  backgroundColor: 'gray' ]></View>
      </View>
    );