React本机动态设置按钮高度

Question

我正在使用React Native Elements将一个按钮添加到我的布局中，下面是代码：

<Button
                title="Login"
                buttonStyle={{ backgroundColor: Colour.green }}
                containerStyle={{
                    paddingLeft: '20%',
                    paddingRight: '20%',
                    alignSelf: 'center',
                    position: 'absolute',
                    bottom: '-5.2%',
                    elevation: Platform.OS === 'android' ? 5 : 0,
                }}
                titleStyle={{ fontSize: normalize(10) }}
                loading={loggingIn}
                onPress={login}
            />

问题是加载微调器比按钮文本大，所以当你点击按钮时，它会使加载微调器出现在按钮内，并且按钮高度增加，以满足加载微调器的大小，这看起来很糟糕，然后当加载微调器消失时，它又缩小了。我尝试使用以下命令设置加载微调器的大小：

loadingProps={{size:normalize(10)}}

但在Android/IOS屏幕尺寸之间并不一致，一些设备的按钮不会增加/减少尺寸，但其他设备会。

有没有一种方法可以在所有设备上设置按钮高度，使按钮高度在渲染后永远不会改变，并且按钮高度需要正确地适应微调器？

Answer 1

尝试对buttonStyle使用固定的宽度和高度。

<Button
          title="Login"
          buttonStyle={{ width: 150, height: 50, backgroundColor: null }}
          containerStyle={{
            backgroundColor: 'green',
            alignItems: 'center',
            alignSelf: 'center',
            // position: 'absolute',
            elevation: Platform.OS === 'android' ? 5 : 0,
          }}
          loadingProps={{ color: 'red' }}
          loading={true}
          onPress={login}
        />

请不要有疑问。