React native react native上的浮动操作按钮

我想在屏幕右下角的react native android中使用一个浮动操作按钮。但我不能这样做

CreateButton组件包含浮动按钮代码。我在列表视图之后调用了CreateButton组件，我想在ListView android组件上显示这个按钮，并在右下角显示透明覆盖和固定位置

navigationView}>
救生员
//这是浮动按钮组件调用
//这是浮动按钮组件（）

您可以尝试几件事 1.边框宽度=0px

---

2.将最小api级别设置为21。

调整按钮的底部、左侧、右侧和顶部，并为按钮提供绝对位置

这是我用来制作浮动按钮的代码

width: 60,  
height: 60,   
borderRadius: 30,            
backgroundColor: '#ee6e73',                                    
position: 'absolute',                                          
bottom: 10,                                                    
right: 10, 

---

看看这个组件，我想它正是你想要的：

---

无需创建您的，您只需使用它即可轻松集成到您的项目中。

  <TouchableOpacity
    style={{
      borderWidth: 1,
      borderColor: 'rgba(0,0,0,0.2)',
      alignItems: 'center',
      justifyContent: 'center',
      width: 70,
      position: 'absolute',
      bottom: 10,
      right: 10,
      height: 70,
      backgroundColor: '#fff',
      borderRadius: 100,
    }}
  >
    <Icon name='plus' size={30} color='#01a699' />
  </TouchableOpacity>

安装图标包：

npm安装反应本机矢量图标--保存

反应本机链接

---

我也遇到了同样的问题，我尝试了Pankaj Thakur解决方案，但它没有为我解决问题（FAB仍然是相对于scrollList的）。因此，我使用Top property为我解决了这个问题。

这里有更多的回购协议至今仍在维持（2019年12月）：

---

首先尝试使用zIndex，但

位置：绝对值

巧妙地在需要的地方显示它。只需重新排序代码，这样FAB就可以在其他元素之后，如果它仍然被其他元素覆盖，那么position absolute在Android中不起作用。无论如何，添加另一个固有的脆弱的第三方依赖项，以节省15行代码@TonyAdams的刻薄并没有增加价值，我明白你的意思，但这不是怎么说的，这是一个两年前的答案，加上图书馆没有问题，这是我使用的东西，有更多的功能，15行实现。项目不维护如果你不想使用react native vector图标，你可以使用+inside touchable opacity来创建圆。为什么要使用如此大的

边界半径来创建圆。我已将位置设置为中心。它不显示文本。
  <TouchableOpacity
    style={{
      borderWidth: 1,
      borderColor: 'rgba(0,0,0,0.2)',
      alignItems: 'center',
      justifyContent: 'center',
      width: 70,
      position: 'absolute',
      bottom: 10,
      right: 10,
      height: 70,
      backgroundColor: '#fff',
      borderRadius: 100,
    }}
  >
    <Icon name='plus' size={30} color='#01a699' />
  </TouchableOpacity>