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

Answer 2

要精确地执行此操作，您需要知道字符串呈现后将占用的大小。我无法为此找到React Native API（并且我假设您也找不到），但是我知道Android和iOS都具有此类API。因此，解决方案将是在iOS和Android中创建一个本机模块（https://facebook.github.io/react-native/docs/native-modules-android.html），该模块公开一种称为“ measureText”的方法。然后，在每个本机类中，您将使用相应的API：

此答案中提到的Android API应该可以工作：https://stackoverflow.com/a/7329169/3930970
iOS API：https://developer.apple.com/documentation/foundation/nsstring/1531844-sizewithattributes

我实际上还没有尝试过，所以我很好奇这样的事情最终能否奏效。干杯！

Answer 3

您可以使用生命周期方法componentWillMount()计算边界半径：

componentWillMount() {
    const { height } = Dimensions.get('window');
    radius = height / 2;
}

此方法仅被调用一次，即在初始调用之前渲染。由于此方法是在render（）之前调用的。

然后，您可以使用计算出的半径来设置按钮样式：

<TouchableOpacity
    style={[styles.button, { borderRadius: radius }]}
    onPress={() => alert('Hello World!') }
>

这里是工作中的demo。

如何在渲染前四舍五入按钮？

3 个答案: