javascript - 将值(value)观置于他人之下

Question

我尝试将值(数字 + %)置于“电池 L”和“电池 R”下的中心。例如:

Battery L    Battery R
  100%         100%

你知道我该怎么办吗？

<View style={{ alignItems: "center" }}>
  <View style={{ flex: 1, flexDirection: "row" }}>
    <View style={{ justifyContent: "flex-end", alignItems: "flex-end", marginRight: 20 }}>
      <Text style={{}}>{"Battery R"}</Text>
    </View>
    <View style={{ justifyContent: "flex-start", alignItems: "flex-start" }}>
      <Text style={{}}>{"Battery L"}</Text>
    </View>
  </View>

  <View style={{ flex: 1, flexDirection: "row" }}>
    <View style={{ justifyContent: "flex-end", alignItems: "flex-end" }}>
      <Text>{"100" + " %"}</Text>
    </View>
    <View style={{ justifyContent: "flex-start", alignItems: "flex-start" }}>
      <Text>{"100" + " %"}</Text>
    </View>
  </View>
</View>

Link

Answer 1

您可以使用如下简单的样式指南来实现此目的

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
    <Text>{"Battery L"}</Text>
    <Text>{"100" + " %"}</Text>
  </View>
  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
    <Text>{"Battery R"}</Text>
    <Text>{"100" + " %"}</Text>
  </View>
</View>

这可能不是最佳解决方案。

希望这对您有帮助。如有疑问，请放心。