如何在 React Native 中按第一行对齐文本对象

Question

在我的应用程序中，我希望有大段文本，其时间戳中心与每个文本对象的第一行对齐。有没有办法做到这一点？

这是我正在尝试做的一个例子。

我尝试将第一行隔离到一个单独的对象中，但我不知道如何做。在 CSS 中，我可以使用伪元素来完成此任务。

我当前的两个元素的代码看起来像

<View>
    <Text style={styles.timestamp}>6:42 AM</Text>
    <Text style={styles.paragraph}>
        A long paragraph of text for demonstration.
    </Text>
</View>

Answer 1

看看这个：

import React, { Component } from "react";
import { View, Text, ScrollView } from "react-native";

class Test extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch",
            margin: 30,
            borderWidth: 1
          }}
        >
          {/* timestamp */}
          <View
            style={{
              flex: 1,
              justifyContent: "flex-start",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <Text style={{ backgroundColor: "lime", fontSize: 22 }}>
              6:42 AM
            </Text>
          </View>

          {/* text */}
          <View
            style={{
              flex: 2.5,
              justifyContent: "center",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <ScrollView style={{ flex: 1, alignSelf: "stretch" }}>
              <Text style={{ fontSize: 22 }}>
                <Text style={{ backgroundColor: "cyan", fontSize: 22 }}>
                  Line with color{"\n"}
                </Text>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum. The standard chunk of Lorem Ipsum used since the
                1500s is reproduced below for those interested. Sections 1.10.32
                and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are
                also reproduced in their exact original form, accompanied by
                English versions from the 1914 translation by H. Rackham. Lorem
                Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum. The standard chunk of Lorem Ipsum used since the
                1500s is reproduced below for those interested. Sections 1.10.32
                and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are
                also reproduced in their exact original form, accompanied by
                English versions from the 1914 translation by H. Rackham.
              </Text>
            </ScrollView>
          </View>
        </View>
      </View>
    );
  }
}

export default Test;

如果您也需要滚动时间戳，请告诉我！