Question

我想在react native中添加浮动按钮。我已经用position: absolute添加了它，但是它显示在末尾，即屏幕的底部。当前，它仅显示在底部，即屏幕内容结束的位置。我想在右下角显示浮动按钮，当用户上下滚动屏幕时应该可以看到它。

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

如果我使用职位：“固定”，那么它将给我错误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,
}

Answer 2

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

Answer 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>

如何在React Native中添加浮动按钮？

3 个答案: