React Native自定义组件布局异常：TestComponent未显示问题排查

我看了你写的代码和遇到的问题——黄色视图和蓝色区域表现都符合预期，但TestComponent偏偏不显示，这确实挺让人困惑的，咱们来一步步捋清楚原因：

首先先看你写的TestComponent代码：

export default class TestComponent extends React.Component { 
  render() { 
    return ( 
      <View style={{flex:1}}> 
        <Text>Test</Text> 
      </View> 
    ); 
  } 
}

它的父容器代码是这样的：

<View style={{ flex: 0, backgroundColor: 'red' }}>
  <TestComponent />
</View>

问题根源 #

问题出在TestComponent内部的View设置了flex:1，而它的父容器是flex:0（也就是不分配额外空间，仅占用自身内容所需空间）。在React Native的Flex布局逻辑里，当父容器没有明确的宽/高尺寸，同时子元素设置了flex:1时，子元素会试图填充父容器的可用空间，但父容器本身因为flex:0且没有内容撑开高度，最终会导致子元素的高度被压缩为0，里面的Text自然就看不到了。

而黄色视图能正常显示，是因为它内部直接放了Text，没有额外设置flex:1的View，父容器能被内容正常撑开。

解决方案 #

你只需要修改TestComponent里的View样式，去掉flex:1，让它自适应内容即可：

export default class TestComponent extends React.Component { 
  render() { 
    return ( 
      <View> {/* 移除flex:1 */}
        <Text>Test</Text> 
      </View> 
    ); 
  } 
}

如果你需要TestComponent内部的View有其他布局需求，也可以给它设置flexGrow:0或者明确的最小高度，确保父容器能被内容撑开。

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