将文本与 React Native 对齐的问题

Question

我在将粗体文本与下部文本对齐时遇到问题。

这是代码：

import React from "react";
import { View, StyleSheet, Text } 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>
        <Text style={styles.itemText}>{props.fach}</Text>
      <View style={styles.itemLeftBeschreibung}>
        <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,
  },

  itemText: {
    fontWeight: "bold",
    fontSize: 14,
    marginLeft: Platform.OS === "ios" ? -8 : -15,
    color: "#FEF5E2",
  },

  Zeit: {
    fontWeight: "bold",
    fontSize: 20,
    marginLeft: Platform.OS === "ios" ? -5 : -15,
    color: "#FEF5E2",
  },

  itemTextBeschreibung: {
    marginTop: -12,
    marginLeft: Platform.OS === "ios" ? 47 : -51,
    fontSize: 14,
    color: "#FEF5E2",
  },

  itemLeft: {
    flexDirection: "row",
    alignItems: "flex-start",
    flexWrap: "wrap",
  },

  itemLeftBeschreibung: {
    flexDirection: "row",
    alignItems: "flex-start",
    flexWrap: "wrap",
  },

  checkbox: {
    marginRight: Platform.OS === "ios" ? 15 : 20,
    marginTop: 2,
  },
});

export default Stundenplanitem;

我是这个网站的新手，所以我不知道这些信息对你来说是否足够，但如果有人问我会添加更多内容。

我也是 react/react 原生的新手，有没有构建应用程序的教程。我found/watched是垃圾

编辑：下面的小部件是重复的。

Answer 1

欢迎来到react-native。首先，我通常建议不要对样式使用负值，除非您试图将一个组件叠加到另一个组件上。如果我想实现你在这里尝试创建的效果，它会更像这样：

<View style={styles.container}>
  <View>
   <Text>{//your header here}</Text>
  </View>
  <View style={styles.titleContainer}>
    <View>
      <Text>{//your title 1}</Text>
    </View>
    <View>
      <Text>{//your title 2}</Text>
    </View>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    // rest of your styling like border radius and background color
  },
  titleContainer: {
    paddingLeft: 5,
  }
})

上面的代码所做的是将 UI 分成多个部分。您拥有包含其他所有内容的主容器。然后你有两个部分水平相邻。一个有您的主要标题，另一个有两个较小的标题。现在您可以向包含较小标题的包装器添加填充，以便它们正确对齐并从相同的点开始。

其次，关于教程，我个人更喜欢弄乱文档本身，因为它确实允许您在受控环境中准确地查看每种样式对您的作用。但掌握 React Native 的最好方法是了解 Reactjs 和 flex-boxes 的工作原理，并以此为基础。这需要一点时间，但你会到达那里。核心原则是将设计分解成更小的块，并弄清楚如何连接这些块。

将文本与 React Native 对齐的问题

Problem to aligning Text with React Native

reactjs

react-native

text

native