如何在渲染前圆按钮？答案

【问题标题】：How to round button before rendering?如何在渲染前圆按钮？
【发布时间】：2019-04-01 15:45:31
【问题描述】：

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

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

我实现的方式是在自定义组件中我使用onLayout这样的函数：

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

问题是按钮最初会在屏幕上显示为一个矩形，并且仅在一毫秒后，它会圆角导致闪烁。

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

如何实现这一点？谢谢！

【问题讨论】：

介意分享您的按钮组件和样式吗？
如果你想在onLayout之前设置borderRadius那么你可以使用this.setState({borderRadius:50});在 componentDidMount() 方法中。但是如果你想设置borderRadius“onLayout”那么你可以使用1000ms的超时。让我知道它是否有效。
你也可以将初始的borderRadius 样式设置为一个超高的数字。它永远不会“超过圆角”，但无论大小，都会显得圆润。

标签： react-native

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

【讨论】：

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

我实际上并没有尝试过，所以我很好奇这样的事情是否会奏效。干杯！

【讨论】：

【解决方案3】：

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

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

这个方法只被调用一次，在初始之前使成为。因为这个方法是在 render() 之前调用的。

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

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

这是一个有效的demo。

【讨论】：