如何在 React Native 中相对于父级的父级绝对定位某些内容？

Question

我想将React Native项目中的Font Awesome图标绝对定位为相对于父级的父级，而不是图标的直接父级。

然而，当我调查它时，我在下面的页面上发现了以下内容：https://reactnative.dev/docs/layout-props#position

React Native中的

position类似于常规CSS，但默认情况下所有内容都设置为relative，因此absolute的定位始终相对于父级。

因此，如果我有以下内容，我如何将图标相对于祖父母TouchableOpacity而不是父View定位？非常感谢。

<TouchableOpacity
onPress={() => {}}
>
<View>
{/* Other markup here. */}
</View>
<View>
{/* Want to position this icon relative to TouchableOpacity, not View. */}
<FontAwesome name="heart" />
</View>
</TouchableOpacity>

Answer 1

如果这是您的标记，那么您希望View的位置绝对如下：

<TouchableOpacity
onPress={() => {}}
>
<View>
{/* Other markup here. */}
</View>
<View
style={{
position: 'absolute',
...
}}
>
<FontAwesome name="heart" />
</View>
</TouchableOpacity>

现在，整个视图相对于TouchableOpacity是绝对定位的。因此，这同样适用于它的孩子，也就是。您的图标。