React Native 动态设置按钮高度

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

请不要怀疑。