React Native带居中文字的水平分割线如何实现横向扩展而非纵向？

你当前的代码目标是实现横向铺满、带居中文字的水平分割线，但出现了纵向不必要扩展的问题，可通过以下几点调整解决：

问题核心原因 #

外层View未限制垂直高度，默认会适应父容器的可用垂直空间；加上内部Text设置了固定宽度，若文字长度超出限制会自动换行，进一步拉高整体高度。

具体调整方案 #

• 给外层容器设置固定高度，限制纵向尺寸：
  在外层View的style中添加height: 24（数值可根据视觉需求调整），确保分割线只占用必要的垂直空间，不会随意扩展。

• 优化Text组件的宽度设置：
  移除Text的width: 50，替换为paddingHorizontal: 16，既给文字左右留出与分割线的间距，又能让文字自适应宽度，避免因换行导致高度增加。

• 避免父容器强制拉伸：
  如果外层View的父容器设置了flex: 1，可给外层View添加alignSelf: 'stretch'（保持横向铺满）或alignSelf: 'flex-start'，防止被父容器强制拉满垂直高度。

调整后的示例代码：

<View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.backgroundColor, height: 24 }}>
    <View style={{ flex: 1, height: 1, backgroundColor: 'white' }} />
    <View>
        <Text style={{ paddingHorizontal: 16, textAlign: 'center', color: 'white' }}>Here is the problem</Text>
    </View>
    <View style={{ flex: 1, height: 1, backgroundColor: 'white' }} />
</View>

内容的提问来源于stack exchange，提问作者Jonathan Coletti