如何在本机反应中添加浮动按钮？

Question

我想在 React Native 中添加浮动按钮。我已经添加了它，position: absolute但它显示在最后，即在屏幕的底部。目前它只显示在底部，即屏幕内容结束的地方。我想在右下角显示浮动按钮，当用户上下滚动屏幕时应该可见。

来自 react native paper 的浮动按钮：https : //callstack.github.io/react-native-paper/fab.html#usage

如果我使用 position: 'fixed' 那么它会给我错误https://imgur.com/a/JZJ7Pbl

代码：

<ScrollView>

// Some other View components 

     <FAB
        style={styles.fab}
        small
        color="#00d048"
        icon="add"
      />
</ScrollView>

CSS：

fab: {
        position: 'absolute',
        right: 0,
        bottom: 0,
    }

在屏幕截图中，您可以看到按钮没有浮动在内容上，而是显示在屏幕底部。

截屏：

Answer 1

React Native 目前不支持position: fixed，因此我们必须将元素添加到单独View的绝对位置。由于我们仍然想滚动其他内容，我们必须将这两个内容包装在另一个中View：

<View style={{flex: 1}}>
  <ScrollView>
   // Your other components here
  </ScrollView>
  <View style={styles.fixedView}>
    <Fab
      style={styles.fab}
      small
      color="#00d048"
      icon="add"
     />
  </View>
</View>

和样式：

fixedView : {
  position: 'absolute',
  left: 0,
  bottom: 0,
  flexDirection: 'row',
  justifyContent: 'flex-end',
}

可选择在右侧和底部留出整齐的边距 Fab

fab: {
    margin-right: theme.spacing.unit * 2,
    margin-bottom: theme.spacing.unit * 3,
}