如何在不使用绝对位置的情况下制作一些东西

Question

我正在开发测验应用程序。用户在其中基于自己的信心选择一个选项，因此，我决定使用可触摸的不透明度及其工作效果在每个选项中制作三个框，但我想在这些框后面添加文字，但我未能实现。这是我的代码

注意：此“样式”包含应用程序的样式对象。

<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>
 <Text>Ajax</Text>
 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
 </TouchableOpacity>
 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
 </TouchableOpacity> 
 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
 </TouchableOpacity>
</View>

一种方法是将文本位置设为绝对，但是此后，不可能根据文本大小动态更改父级的高度。请帮助我解决此问题，或者如果您知道比此更好的解决方案，请提出建议。谢谢！

Answer 1

您可以将absolute框放在TouchableOpacity容器中，而不必将文本设置为flex，而是将容器设置为absolute。这将允许文本大小控制框的高度，同时允许您在文本前面添加任意数量的框。

在这里查看我的示例： https://codepen.io/sungaila/pen/oQpPQq

Answer 2

您可以为其他元素设置负的边距值。

由于您的Text组件处于一阶层次结构，因此应将TouchableOpacity's的边距设置为负值。

<Text>Ajax</Text>
<TouchableOpacity style={{marginTop: -100}}

这样，TouchableOpacity将向上移动100个单位，并覆盖Text元素。