如何使用React Native Paper的Fab组件实现圆形按钮

FAB出现横向拉伸的核心原因是父容器默认flex布局下，未指定对齐规则的子元素会默认占满横向宽度，relative定位下配置的right、bottom属性不会限制元素宽度，才会出现横向拉伸的情况。

你可以选择以下任意一种方案解决问题：

• 方案1（最推荐，无需硬编码尺寸，适配FAB自带的small/regular/large规格）：给FAB样式新增alignSelf属性限制宽度，需要按钮靠右就设为flex-end，靠左设为flex-start，居中设为center即可
• 方案2（适配自定义尺寸需求）：直接给FAB指定一致的宽高，圆角设为宽度的一半，强制固定为圆形样式

修改后的参考代码如下：

import { FAB } from 'react-native-paper';
import { StyleSheet } from 'react-native';

const MyComponent = () => (
  <FAB
    style={styles.fab}
    small
    icon="plus"
    onPress={() => console.log('Pressed')}
  />
);

const styles = StyleSheet.create({
  fab: {
    position: 'relative',
    margin: 16,
    // 方案1只需新增下面这行，根据摆放需求调整属性值即可
    alignSelf: 'flex-end',
    // 方案2硬编码尺寸可加下面三行，二选一使用即可
    // width: 40,
    // height: 40,
    // borderRadius: 20,
  },
})

如果父容器不是flex布局，你也可以给FAB外层套一个View容器，设置外层View的flexDirection: 'row'，再通过justifyContent属性调整按钮的摆放位置，也可以解决拉伸问题。

内容的提问来源于stack exchange，提问作者Jerry Seigle