React Native中实现双侧文本布局的方法咨询

以下是两种实用的实现方式，适配你需求的表单类左右文本布局：

1. 基础Flex布局（推荐） #

通过View的flexDirection: row实现分栏，标签固定宽度保证对齐，内容自适应剩余空间，支持多行文本换行。

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

const DoubleSideTextLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.rowItem}>
        <Text style={styles.label}>姓名</Text>
        <Text style={styles.content}>张三</Text>
      </View>
      <View style={styles.rowItem}>
        <Text style={styles.label}>联系电话</Text>
        <Text style={styles.content}>138xxxx1234</Text>
      </View>
      <View style={styles.rowItem}>
        <Text style={styles.label}>详细地址</Text>
        <Text style={styles.content}>北京市朝阳区某某街道某某小区123号楼456室</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#ffffff',
  },
  rowItem: {
    flexDirection: 'row',
    marginBottom: 14,
    alignItems: 'flex-start', // 多行文本顶部对齐
  },
  label: {
    width: 85, // 固定标签宽度，统一排版
    fontSize: 14,
    color: '#333333',
  },
  content: {
    flex: 1, // 占据剩余全部空间
    fontSize: 14,
    color: '#666666',
    flexWrap: 'wrap', // 内容过长自动换行
  },
});

export default DoubleSideTextLayout;

灵活调整点 #

• 若需垂直居中，将rowItem的alignItems改为center
• 标签长度不固定时，可替换width为flex: 1，同时给content设flex: 2，按比例分配空间

2. 单行文本紧凑布局 #

如果内容均为单行，可直接用Text嵌套实现更紧凑的排版：

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const InlineDoubleText = () => {
  return (
    <Text style={styles.wrapper}>
      <Text style={styles.label}>用户名：</Text>
      <Text style={styles.content}>zhangsan</Text>
      {'\n'}
      <Text style={styles.label}>注册邮箱：</Text>
      <Text style={styles.content}>zhangsan@example.com</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    padding: 16,
    backgroundColor: '#ffffff',
    fontSize: 14,
  },
  label: {
    color: '#333333',
    fontWeight: '500',
    width: 90,
    display: 'inline-block',
  },
  content: {
    color: '#666666',
  },
});

export default InlineDoubleText;

内容的提问来源于stack exchange，提问作者Sameer Khan