时间戳

首页 > 解决方案 > 如何在本机反应中添加浮动按钮？

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

问题描述

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

来自反应原生纸的浮动按钮： 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,
    }

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

截屏：

在此处输入图像描述

标签： cssreactjsreact-native

解决方案

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,
}

推荐阅读