React Native生产构建时标题栏布局下移异常，开发模式无此问题

根因分析 #

• 根因1：根容器container的flexDirection属性错误设置为row，你的布局是「扫描内容区+底部导航栏」的上下结构，应该使用flexDirection: 'column'，开发版本React Native有布局容错逻辑，生产构建后会严格执行样式规则，导致布局偏移。
• 根因2：text样式中错误添加了仅Flex父容器生效的justifyContent属性，该属性对Text组件无效，生产版本样式压缩优化后会干扰marginTop的计算逻辑，进一步放大偏移量。
• 根因3：titleWrapper使用硬编码top: 30做偏移，未设置父容器定位规则，不同环境下偏移量解析逻辑不一致。

修复方案 #

修改后的完整样式代码如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    // 修复flexDirection为column，适配上下布局
    flexDirection: 'column',
  },
  titleWrapper: {
    width: '100%',
    // 移除硬编码top，改用paddingTop适配状态栏，可根据需要调整数值
    paddingTop: 30,
    height: 80, // 原高度50加paddingTop30，总高度保持和之前视觉一致
    alignSelf: 'center',
    alignItems: 'center',
    // 新增justifyContent让文字垂直居中
    justifyContent: 'center',
    backgroundColor: '#A2F5AA',
  },
  text: {
    fontSize: 15,
    fontWeight: 'bold',
  },
  contentContainer: {
    flex: 1 
  },
});

如果需要适配不同设备的状态栏高度，还可以用react-native提供的SafeAreaView包裹titleWrapper，替代硬编码的paddingTop，兼容性更好。

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