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

【问题标题】：How to make something behind without using position absolute如何在不使用绝对位置的情况下制作一些东西
【发布时间】：2018-11-21 14:15:10
【问题描述】：

我正在开发一个测验应用程序。在其中用户根据他的信心选择一个选项，因此我决定使用可触摸不透明度在每个选项中制作三个框，并且它工作正常，但我希望在这些框后面有我未能实现的文本。这是我的代码

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

<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>

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

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

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

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

【讨论】：

另一个问题来了。你知道如何在覆盖文本的同时使可触摸的不透明度可触摸吗？因为我希望这些块不会使文本不可读，所以我将文本的 z-index 设为 1，但这使得 Touchable opacity 无法按下。
尝试在文本上将 CSS 设置为pointer-events: none，在方框上设置pointer-events: auto。
它不会使框可点击，因为文本始终位于框上方。我想在框上方显示文本并使其可触摸
嗯，您可能需要为此提出一个新问题。我能想到的一个技巧是将文本放回框后面并将其不透明度设置为零（以便它仍然设置高度），然后在第一个 TouchableOpacity 框内添加一个新文本元素并将其位置设置为绝对。新文本元素将是“显示”文本，而旧文本元素将纯粹用于设置框的大小。
嗯，谢谢！这也许可以工作。但我找到了另一个与此类似的解决方案。我添加了另一个具有相同绝对位置的框视图。这用于触发 onPress 事件的操作，文本后面的另一个用于提供边框和突出显示的背景，它工作正常。再次感谢您的帮助。

【解决方案2】：

您可以为其他元素赋予负边距值。

由于您有Text 组件在第一顺序分层，您应该将TouchableOpacity's 边距设置为负值。

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

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

【讨论】：

谢谢！但这与文本的绝对位置几乎相同。实际上，我想根据文本（行数）获得父级和那些栏的动态高度