Question

我正在做一个项目，必须管理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的文本不对齐。另外，如果我复制上面的代码以生成其他两列，那么一切都会一团糟。我在这里想念什么？如何更改代码以获取所需的内容？

Answer 1

您将要使用https://0xdata.atlassian.net/browse/PUBDEV-5860 {justifyContent：'space-evenly'}或{justifyContent：'space-between'}和Flexbox {textAlign：'right'}

Answer 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>
    );
  }
}

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

2 个答案: