将两个React Native文本标签水平对齐

Question

我想将两个文本项对齐在一行中。例如：

文本{键}/文本 文本{值}/文本

我在文档中阅读了有关文本元素的内容： 该元素相对于布局是特殊的：内部的所有内容不再使用 flexbox 布局，而是使用文本布局。这意味着 中的元素不再是矩形，而是在看到行末时换行。

因此，我认为我需要将文本包装在视图中。我仍然没有解决问题，这里是我的当前进展的 React Native 示例。请注意，元素会换行到新行。如何避免这种行为？

https://rnplay.org/apps/F4sr7Q

- mibbit

Answer 1

看起来你在这一行搞砸了：

<View style={styles.IndexTableRow,{backgroundColor:'blue'}}>

只需将背景色样式移动到IndexTableRow，它就可以工作。

- Smiter

---

感谢您抽出时间回复，Smiter。我很惊讶这是问题所在。实际上，在我的项目代码中，我使用变量将颜色“蓝色”链接起来，并对每一行进行不同的奇偶数着色。从我在github问题上看到的情况来看，这似乎是添加多个类的正确方法。是否有更好的动态样式方法或者至少能够指向特定资源，因为我在互联网、官方文档或者其他地方都没有找到。 - mibbit

为了添加多个类，可以使用以下方法，例如：<Text style={[styles.firstClass, dynamicClass]}>value</Text>。在渲染函数中，您可以编写如下内容：let dynamicClass = ""; if(something) dynamicClass = styles.yourDynamicClass; - Smiter