React Native 粗体文本与下方文本对齐问题求助 附代码及教程咨询

你当前的布局问题根源是结构不合理，强行用负margin调整文本位置，不同设备、不同字重的文本渲染差异会直接导致对齐失效。正确的做法是将右侧的课程名、教师文本放在同一个垂直排列的容器中，和左侧的时间区域做水平并列布局，不需要依赖负margin适配。

修复后代码 #

import React from "react";
import { View, StyleSheet, Text, Platform } from "react-native";

const Stundenplanitem = (props) => {
  return (
    <View style={styles.item}>
      <View style={styles.itemLeft}>
        {/* 左侧时间区域 */}
        <View style={styles.checkbox}>
          <Text style={styles.Zeit}>{props.termin}</Text>
        </View>
        {/* 右侧内容区域，垂直排列 */}
        <View style={styles.contentRight}>
          <Text style={styles.itemText}>{props.fach}</Text>
          <Text style={styles.itemTextBeschreibung}>{props.lehrer}</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: "#AA7777",
    padding: Platform.OS === "ios" ? 15 : 10,
    borderRadius: 6,
    marginTop: 15,
    marginBottom: Platform.OS === "ios" ? -2 : 5,
  },
  itemLeft: {
    flexDirection: "row",
    alignItems: "flex-start",
  },
  checkbox: {
    marginRight: Platform.OS === "ios" ? 15 : 20,
    marginTop: 2,
  },
  Zeit: {
    fontWeight: "bold",
    fontSize: 20,
    color: "#FEF5E2",
    lineHeight: 24, // 固定行高避免偏移
  },
  // 右侧内容垂直容器
  contentRight: {
    flexDirection: "column",
    justifyContent: "flex-start",
  },
  itemText: {
    fontWeight: "bold",
    fontSize: 14,
    color: "#FEF5E2",
    lineHeight: 20, // 和下方文本行高统一
  },
  itemTextBeschreibung: {
    fontSize: 14,
    color: "#FEF5E2",
    lineHeight: 20, // 统一行高
    marginTop: 2, // 正常间距，不用负margin
  },
});

export default Stundenplanitem;

适配注意点 #

• 所有Text组件都添加lineHeight属性，统一不同字重文本的行高，避免上下偏移
• 不用负margin做布局对齐，通过合理的容器嵌套实现预期布局，安卓iOS适配一致性更高
• 避免使用flexWrap，固定的垂直水平布局结构不需要换行，减少布局异常概率

• 优先啃官方中文文档，内容权威更新及时，从基础组件、样式规则、状态管理到原生能力接入都有完整示例
• 从简单小项目入手练习，比如日程表、备忘录、天气应用，一步步熟悉组件封装、路由、状态管理库的使用
• 多刷开发社区的实战踩坑帖，React Native的平台适配坑比较多，前人的经验可以帮你少走很多弯路

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