React Native中不使用Grid实现双栏转通栏L型布局的方法

实现思路 #

React Native 基于 Flexbox 实现布局体系，不需要使用 Grid 特性，仅通过弹性占比的动态调整即可匹配需求：

• 初始状态下，两个横向并列的区块设置相同的弹性占比，实现尺寸平分的默认效果
• 监听希伯来语区块的内容渲染状态，当希伯来语区块的内容完全展示完成时，动态调整弹性占比参数，让英语区块自动获得全部容器宽度

代码实现 #

1. 给父级容器增加横向排列属性，确保两个子区块左右排布
2. 用组件状态动态保存两个区块的flex值，替代原来写死的flex:1
3. 给希伯来语区块绑定布局完成事件，检测内容展示状态，触发占比调整

import { View, Text, ScrollView } from 'react-native'
import { useState } from 'react'
const TextContainer = (props) => {
  // 初始状态两个区块等宽，flex值都为1
  const [hebrewFlex, setHebrewFlex] = useState(1)
  const [englishFlex, setEnglishFlex] = useState(1)
  // 希伯来语区块布局完成时触发
  const handleHebrewBlockLayout = () => {
    // 可根据业务逻辑判断内容是否完全展示，示例逻辑：
    // 确认文本无截断、内容全部渲染完成后，调整区块占比
    // 希伯来语区块不再保留固定占位，英语区块占满全宽
    setHebrewFlex(0)
    setEnglishFlex(1)
  }
  return (
    <ScrollView>
      <View style={[styles.textContainer, { flexDirection: 'row' }]}>
        <View style={{ flex: englishFlex }}>
          <Text>
            {props.english}
          </Text>
        </View>
        <View 
          style={{ flex: hebrewFlex }}
          onLayout={handleHebrewBlockLayout}
        >
          <Text>
            {props.hebrew}
          </Text>
        </View>
      </View>
    </ScrollView>
  )
}

注意事项 #

• 确保父级textContainer的样式包含flexDirection: 'row'，否则两个区块会默认纵向堆叠，无法实现左右并列的初始效果
• 不要给子区块设置固定宽度属性，否则会破坏Flex弹性布局的自动适配逻辑
• 当希伯来语区块需要在占比调整后依然保留自身内容的显示空间时，可以将其宽度设置为auto，不会影响英语区块占满剩余全宽的效果
• 所有宽度适配由RN布局引擎自动计算，不需要手动处理不同屏幕尺寸的宽度换算

内容的提问来源于stack exchange，提问作者BFP