Question

如何在不使用静态宽度的情况下获得这样的布局？

“•”之前的文本应左对齐，但“•”之后的文本应全部内联。为了使它看起来像我使用了静态宽度，但是出于明显的原因，这并不是很好。

这是React Native代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    margin: 2,
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 2,
  },
});

const RoleRow = ({ role }) => (
  <View style={styles.container}>
    <Text style={{ width: 55 }}>
      {role.name}
    </Text>
    <Text style={{ marginLeft: 5 }}>
      {` • ${role.person.name} ${role.person.lastName}`}
    </Text>
  </View>
);

Answer 1

这可能会有所帮助。可能有些奇怪，但是您必须将每个项目都视为一列而不是一行，但这是一个codepen

HTML

 <div class="cont">
      <div class="role-col">
        <div class="role">Small Role</div>
      </div>
      <div class="name-col">
        <div class="name">Small Name</div>
      </div>
    </div>

SCSS

.cont{
  width:400px;
  height:400px;
  background-color:green;
  display:flex;
  flex-direction:row;

  .role-col,.name-col{
    .role,.name{
      border-top:1px solid black;
      border-bottom:1px solid black;
      margin-top:8px;
    }
  }

  .role-col{
    display:flex;
    flex-direction:column;
    background-color:red;

    .role{
      border-left:1px solid black;
      margin-left:8px;
      padding-right:4px;
    }
  }

  .name-col{
    display:flex;
    flex:1;
    flex-direction:column;

    .name{
      border-right:1px solid black;
      margin-right:8px;
      padding-left:4px;
    }
  }
}

这样做是为了在角色和名称的每一列中都包含一个项目。因此，如果您有一个没有角色的名称或一个没有名字的角色，则必须在列中添加一个空项目，以便CSS可以正确调整它们的大小。如有任何疑问，请告诉我

Answer 2

您应该使用flex：

const RoleRow = ({ role }) => (
  <View style={styles.container}>
    <Text style={{ flex: 1 }}>
      {role.name}
    </Text>
    <Text style={{ marginLeft: 5, flex: 3 }}>
      {` • ${role.person.name} ${role.person.lastName}`}
    </Text>
  </View>
);

这将使Text区域的比例为1-3。

Answer 3

这是kriddy800's answer的简单React Native版本。同样的东西，只是格式化以更好地回答我的问题。谢谢kriddy800！

class Participant {
    id?: number;
    name?: string;

    constructor(public ltype: 'Provider' | 'Establishment') {
    }

    get isProvider(): boolean {
        return this.ltype === 'Provider';
    }

    get isEstablishment(): boolean {
        return this.ltype === 'Establishment';
    }

    get opposite(): string {
        if (this.ltype === 'Provider') {
            return 'Establishment';
        }
        return 'Provider';
    }
}

const filter = new Participant('Provider');
console.log(filter.ltype); // 'Provider'

React Native Flexbox行对齐项目

3 个答案: