React Native中titleContainer设置flex:0.5未生效问题解决

React Native flex:0.5 配置不生效问题 #

问题描述 #

给titleContainer节点设置flex: 0.5后样式未生效，预期绿色背景的该区域占半屏，实际没有达到对应效果。

相关代码 #

export const Focus = () => {
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <TextInput />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#43840',
  },
  titleContainer: {
    flex: 0.5,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#559974',
  },
  title: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 15,
  },
});

排查方向 #

• 父容器flex配置校验：子节点flex属性生效的前提是父容器已明确设置flex值，本案例中父容器container已配置flex:1，该部分无问题
• 渲染逻辑校验：检查组件是否为条件渲染，触发渲染的判断条件是否存在逻辑漏洞，导致组件挂载时父容器尺寸未完成初始化
• 样式拼写校验：确认flex相关属性名称拼写正确，无大小写错误
• 补充说明：代码中父容器backgroundColor值#43840为无效十六进制颜色值，仅会导致背景色不展示，不影响flex属性生效

最终解决方案 #

该组件为条件渲染，原渲染判断条件存在异常，修复条件逻辑后flex配置正常生效，所有功能运行正常。

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