如何在本机反应中修复屏幕上的元素。类似于 css 中固定的位置答案

【问题标题】：How can I fix an element at the screen in react native. Something like a position fixed in css如何在本机反应中修复屏幕上的元素。类似于 css 中固定的位置
【发布时间】：2022-10-19 00:35:46
【问题描述】：

因为 react native 没有固定的位置：

不变违规：提供给StyleSheet input 的价值fixed 的无效道具position，应为["absolute","relative"] 之一。样式表输入：{ “位置”：“固定”， “顶部”：465， “身高”：40， “宽度”：300， “边框宽度”：1， “填充水平”：20， “边距”：5， “边界半径”：20 }

【问题讨论】：

标签： expo

【解决方案1】：

在本机反应中，您可以使用

位置：'绝对'，左：0，顶部：0，

记住绝对位置仅限于其父视图

【讨论】：

抱歉，我忘了提到当屏幕滚动时元素会移动，因此我想修复它。在绝对位置它随屏幕滚动

【解决方案2】：

这是一个“hack”，您可以尝试以下

 {/* Where <View> is the container element */}

<View style={{flex: 1;}}>
  <AbsoluteElement style={{position:'absolute', right: 20, bottom:20}}></AbsoluteElement>
</View>

容器已设置为flex: 1，它应该占据父级的全部高度。

如果您需要视图中的其他元素，例如 ScrollView，那么您可以尝试：

<View style={{flex: 1}}>
  <ScrollView>
    {/* Other Elements Can Go Here */}
  </ScrollView>

    {/* Other Elements Can Go Here */}
    
  <AbsoluteElement style={{position:'absolute', right: 20, bottom:20}}></AbsoluteElement>
</View>

假设容器元素总是占据页面的整个高度，<AbsoluteElement> 应该总是固定在屏幕上。

【讨论】：