反应本机动态设置按钮高度

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

随意怀疑。