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

【问题标题】：How to add floating button in react native?如何在本机反应中添加浮动按钮？
【发布时间】：2019-06-21 11:45:45
【问题描述】：

我想在 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,
    }

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

截图：

【问题讨论】：

标签： css reactjs react-native

【解决方案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,
}

【讨论】：

如果我使用 position: 'fixed' 然后我得到这个检查这个imgur.com/a/JZJ7Pbl
好点 @funjoker React Native 不像 ReactJS 那样支持 position: fixed。让我知道更新后的方法是否适合您。
如果我也想在左下角添加图标，我该怎么做呢？
将其添加到fixedView，指定justifyContent: space-between而不是flex-end并从fab中删除margin-right。

【解决方案2】：

如果要使用position: absolute;，父级必须是position: relative;

【讨论】：

CSS 默认值和 React Native 之间存在一些差异。例如，position: relative 是 React Native 中的默认值，而对于 CSS，它是 static。并非所有样式属性都在 React Native 中可用。

【解决方案3】：

https://github.com/oblador/react-native-vector-icons

import {TouchableOpacity, Image} from 'react-native';

<TouchableOpacity
          style={{
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0.2)',
            alignItems: 'center',
            justifyContent: 'center',
            width: 70,
            position: 'absolute',
            bottom: 30,
            right: 10,
            height: 70,
            backgroundColor: '#fff',
            borderRadius: 100,
          }}
        >
          {/* <Icon name="plus" size={30} color="#01a699" /> */}
          <Image style={{width: 50, height:50,  resizeMode: 'contain'}} source={require('assets/imgs/group.png')} />
        </TouchableOpacity>
        </View>

【讨论】：