如何在渲染前打开按钮

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

要精确地执行此操作，您需要知道字符串在渲染后占用的大小。为此，我找不到本机API（我假设您也不能），但是我知道Android和iOS都有这样的API。因此，解决方案将是为iOS和Android中的一种本机模块（https://facebook.github.io/reaect-native/docs/native-modules-android.html）创建一个称为" MeacureText"的方法，用于iOS和Android中某物。然后，在每个本地类中，您将使用相应的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;
}

此方法仅称为一次 使成为。因为此方法在渲染（）。

之前被调用。

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

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

这是一个工作演示。