我如何相对于父母的父母在 React Native 中绝对定位某些东西？答案

【问题标题】：How do I absolutely position something in React Native relative to a parent's parent?我如何相对于父母的父母在 React Native 中绝对定位某些东西？
【发布时间】：2020-07-14 12:41:18
【问题描述】：

我想绝对定位我在 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>

【问题讨论】：

您能否在View 上使用onLayout 将您的项目包装在TouchableOpacity 中，获取它的测量值并将您的定位值设置为状态，然后使用这些值来定位（通过样式）您的@987654331 @图标
这就是我正在做的事情。我知道左视图有一定的宽度，所以我可以相应地调整我的left 和top 值以获得预期的效果，但感觉很草率，我更喜欢更干净的方式，因此问题。

标签： css react-native css-position absolute

【解决方案1】：

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

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

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

【讨论】：

我明白了。谢谢。不过这很棘手，因为这两个视图当前处于flex: row 布局中，而带有图标的视图具有flex: 1。不过我明白你在说什么。不理想，但我明白了。猜猜我将不得不捏造这个（就像 React Native 中的所有其他东西一样），除非有更好的解决方案。谢谢。
我不确定它是否棘手，因为我总是使用它。假设您在视图中有更多内容，因为您说您的视图有flex: row。如果你想让图标绝对定位，那么图标就属于它自己的View。或者您可以将图标移到外面并拥有<FontAwesome style={{ position: 'absolute' }} ...>。想法是您想要绝对定位的项目应该与其他非绝对定位的元素一起。有点明白我的意思？ :)
是的，我可以将图标完全放在视图之外。这是一个想法。谢谢。