react-native - 如何在渲染前圆形按钮？

Question

我想创建一个按钮组件，无论其尺寸如何，它都会自动具有圆角。

如您所知，要实现圆角，一种实现方法是将边框半径指定为按钮高度的一半。

我实现的方式是在自定义组件中使用 onLayout像这样的功能:

 onLayout(event: LayoutChangeEvent) {
    const { height } = event.nativeEvent.layout;
    this.setState({ borderRadius: height / 2 });
  }

问题是按钮最初会以矩形的形式出现在屏幕上，只有在一毫秒后，它才会圆角导致闪烁。

我的猜测是 onLayout在组件渲染后调用。

人们将如何实现这一点？谢谢!

Answer 1

在计算borderRadius之前，您可以返回透明按钮，这将防止这种闪烁效果......

// you pass radius, and height from component state

const MyButton = ({ radius, height }) => {
   if (radius === null) return <View style={{ backgroundColor: transparent }}>...</View>

else return <View style={{ borderRadius: radius, backgroundColor: 'red' }}>...</View>;
};