React Native移除子组件后View无法正确自适应尺寸问题

针对你遇到的当pinyinMode为false时外层View无法正确自适应子组件尺寸的问题，可以试试以下几种解决方案：

方案1：给条件渲染元素添加占位替代null #

当pinyinMode为false时，不要直接不渲染元素，而是用一个高度为0、完全透明的占位元素代替，保证父容器的子元素结构稳定，避免布局引擎计算异常：

return (
    <View style={{ backgroundColor: 'red' }}>
      <Pressable style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
        <Text style={{ fontSize: 20, backgroundColor: 'blue' }}>{hanzi}</Text>
        {pinyinMode ? <Text style={{ backgroundColor: 'yellow' }}>{pinyin}</Text> : <View style={{ height: 0, width: 0, opacity: 0 }} />}
      </Pressable>
    </View>
);

方案2：明确设置父容器的收缩属性 #

给外层View和Pressable添加flexShrink: 1，强制容器根据子元素尺寸收缩，避免保留之前的布局空间：

return (
    <View style={{ backgroundColor: 'red', flexShrink: 1 }}>
      <Pressable style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: 'green', flexShrink: 1 }}>
        <Text style={{ fontSize: 20, backgroundColor: 'blue' }}>{hanzi}</Text>
        {pinyinMode && <Text style={{ backgroundColor: 'yellow' }}>{pinyin}</Text>}
      </Pressable>
    </View>
);

方案3：给Text组件设置固定行高 #

有时候Text的动态行高会导致布局计算不稳定，给两个Text组件明确设置lineHeight，让尺寸计算更准确：

return (
    <View style={{ backgroundColor: 'red' }}>
      <Pressable style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
        <Text style={{ fontSize: 20, backgroundColor: 'blue', lineHeight: 24 }}>{hanzi}</Text>
        {pinyinMode && <Text style={{ backgroundColor: 'yellow', lineHeight: 20 }}>{pinyin}</Text>}
      </Pressable>
    </View>
);

这些方法都是通过稳定布局结构或者明确约束来让React Native的布局引擎正确计算容器尺寸，你可以根据实际情况选择其中一种测试。

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