React Native Styled-Components：如何实现两个文本组件同行显示？

安全阿岳

2026-8-16

问题与解决方案

问题描述

尝试用Container组件将GeneralText和Information两个Text组件放在同一行，但除了Information的颜色属性外，两个组件的其他样式均失效，需要实现左右对齐的横向排列效果。

问题原因

你将Container定义为styled.Text，但React Native的Text组件仅用于承载文本内容，不能作为布局容器嵌套其他Text组件。这种错误嵌套会导致子Text组件的样式被父Text干扰，同时无法实现横向布局。

最优实现方案

将Container替换为React Native的View组件（专用布局容器），通过flex布局实现横向排列，具体修改如下：

把Container的基础组件从styled.Text改为styled.View
给Container添加flexDirection: 'row'，让子元素横向排列
将Information的marginLeft: 300px改为marginLeft: 'auto'，实现自适应靠右对齐，适配不同屏幕尺寸
修正原代码中Menu组件内部错误嵌套自身的问题，改用View作为外层容器

修正后的完整代码

import React, { FC } from 'react';
import styled from 'styled-components/native';

const GeneralText = styled.Text`
  font-size: 15px;
  margin-left: 12px;
  padding: 20px 0;
`;

const Information = styled.Text`
  font-size: 15px;
  margin-left: auto;
  padding: 20px 0;
  color: grey;
`;

// 改用View作为布局容器
const Container = styled.View`
  flex-direction: row;
  align-items: center; // 可选，让文本垂直居中
`;

// 定义Props类型（按需使用）
type Props = {};

const Menu: FC<Props> = () => (
  <View>
    <Container>
      <GeneralText>First Name</GeneralText>
      <Information>John Smith</Information>
    </Container>
  </View>
);

export default Menu;