在 React Native 中保持两个文本值垂直对齐答案

【问题标题】：Keep Two Text Values Vertically aligned in React Native在 React Native 中保持两个文本值垂直对齐
【发布时间】：2019-01-31 08:44:57
【问题描述】：

我正在做一个项目，我必须管理 6 个文本值。每对都必须垂直对齐。作为一个例子检查下面。

 Latest    Old     New
  6M       10      20K

如上例所示，文本值调用Latest 必须与6M 对齐，其中6M 文本值随时间变化。所以保持这两个文本值垂直对齐是必须的。相同的概念适用于其他两列。

另外，由于只有 3 列，这些列应该均匀使用设备显示宽度。

我的代码

<View style={{flexDirection:'row'}}>
  <View style={{flexDirection:'column'}}>
     <View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}>
     {
        this.state.fontLoaded ? (
        <Text style={{fontSize:14,minWidth:getWidth()*0.25}}>Latest</Text>    // Select K or M or B or T
        ) : null
     }
     </View>
     <View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}>
     {
         this.state.fontLoaded ? (
         <Text>6M</Text>    // Select K or M or B or T
         ) : null
     }
  </View>
 </View>
</View>

getWidth() 函数返回设备显示宽度。我想让这个程序响应所有 iOS 和 Android 显示尺寸。这就是我使用getWidth() 函数的原因。

输出

下面的草图类似于我通过上面的代码收到的。

Latest
    6M

问题

如上面的代码，当我更改6M 值时，它与Latest 文本不一致。此外，如果我复制上面的代码来生成其他两列，它会让一切变得一团糟。我在这里想念什么？如何更改我的代码以获得所需的内容？

【问题讨论】：

什么意思？
@SamithaNanayakkara 屏幕的所有其他组件也未对齐。

标签： android ios css react-native

【解决方案1】：

您需要使用 Flexbox {justifyContent: 'space-evenly'} 或 {justifyContent: 'space-between'} 和 Text style {textAlign:'right'}

【讨论】：

【解决方案2】：

你可以试试这个代码。

import React, { Component } from 'react';
import {
  View,
  Button,
  Text,
} from 'react-native';

export default class VerticalAlignText extends Component {

  constructor(props: Object) {
    super(props);
    this.state =
      {
        data: [
          { "id": "1", "lable": "Latest", "value": "6M" },
          { "id": "2", "lable": "Old", "value": "10" },
          { "id": "3", "lable": "New", "value": "20K" },
        ]
      }
  };

  renderData() {
    return ( 
      <View 
        style={{flex:1, flexDirection:'row',}}>
        {this.state.data.map((item) =>
          <View
            key={item.id}
            style={{
              flex:1,
              alignItems:"center"
            }}>
            <Text> {item.lable}</Text>
            <Text> {item.value}</Text>
          </View>
        )}
      </View>
    )
  }
   
  handleOnPress(){
    let clonedData = this.state.data.slice();
    clonedData.map((item)=>{
      if(item.lable === "Latest"){
        item.value = item.value === "50K" ? "6M" : "50K";
      }
      return item;
    })
   
    this.setState({data: clonedData});
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#0d98ba" }}>
        {this.state.data.length ? this.renderData() : null}
        <Button
          onPress={()=> this.handleOnPress()}
          title={"changeLatest"}
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

【讨论】：