使用三元运算符进行本机动态更改视图高度

Question

I am trying to dynamically change view height using a ternary operator.

First I get the screen height of the device

const {
  height: SCREEN_HEIGHT,
} = Dimensions.get('window')

const IS_IPHONE_X = SCREEN_HEIGHT === 812
const IS_IPHONE_XR = SCREEN_HEIGHT === 896
const IS_IPHONE_SIX = SCREEN_HEIGHT === 667

Second, I check if the device is iphoneX

const IMAGE_BAR_HEIGHT = Platform.OS === 'ios' ?( IS_IPHONE_X ? 332 : 368): 0

Using a ternary operator is good but I can only check two device with the code above.

Is there a way I could use multiple conditions in a ternary operator? I tried this. But gives me an error:

const IMAGE_BAR_HEIGHT = Platform.OS === 'ios' ?( IS_IPHONE_X ? 332 : IS_IPHONE_XR ? : 368 : IS_IPHONE_SIX : 300) : 0

Answer 1

You can for sure achieve this with Ternary operator but it is not advised to use nested ternaries. I would suggest to use if else here instead of ternary.

  let height = 0;

  if (Platform.OS === 'ios') {
    if (IS_IPHONE_X) {
      height = 332;
    } else if (IS_IPHONE_XR) {
      height = 368;
    } else if (IS_IPHONE_SIX) {
      height = 300;
    }
  }

If you want to do this with ternary only then

const height = Platform.OS === 'ios' ? (IS_IPHONE_X ? 332 : (IS_IPHONE_XR ? 368 : (IS_IPHONE_SIX ? 300 : 0))) : 0;

Answer 2

It is better to use logical operator with ternary operator.

const IMAGE_BAR_HEIGHT = Platform.OS === 'ios' ? ( IS_IPHONE_X && 332 || IS_IPHONE_XR &&  368 || IS_IPHONE_SIX && 300) : 0

Or I recommend split code.

const SCREEN_HEIGHT = Dimensions.get('window').height;

iOSDeviceInfo = () => {
  switch (SCREEN_HEIGHT) {
    case 812:
      return 'X';
    case 866:
      return 'XR';
    case 667:
      return 'SIX';

    default:
      break;
  }  
}


const IMAGE_BAR_HEIGHT = {
  X: 332,
  XR: 368,
  SIX: 300,
}

const imageHeight = Platform.OS === 'ios' ? IMAGE_BAR_HEIGHT[iOSDeviceInfo()] : 0

Not tested.