css - 如何在 native react 中添加 float 按钮？

Question

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

来自 react 原生纸的 float 按钮: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,
    }

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

截屏:

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