react-native 使用三元运算符动态改变视图高度答案

【问题标题】：react-native dynamically changing view height using ternary operatorreact-native 使用三元运算符动态改变视图高度
【发布时间】：2020-01-05 21:15:51
【问题描述】：

我正在尝试使用三元运算符动态更改视图高度。

首先我得到设备的屏幕高度

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

其次，我检查设备是否为iphoneX

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

使用三元运算符很好，但我只能用上面的代码检查两个设备。

有没有办法在三元运算符中使用多个条件？我试过这个。但是给了我一个错误：

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

【问题讨论】：

是的，你可以在同一个表达式中使用任意数量的三元运算符，但你需要确保它在语法上是正确的。 IS_IPHONE_XR ? 之后的部分包含错误。问号后面直接跟一个冒号，这在语法上是不正确的（删除那个冒号）。那么IS_IPHONE_SIX 的位是不正确/不完整的三元表达式。我猜你的意思是写IS_IPHONE_SIX ? 300 : 0

标签： javascript react-native ternary-operator

【解决方案1】：

您可以肯定地使用三元运算符实现此目的，但不建议使用嵌套三元。我建议在这里使用if else 而不是三元。

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

如果你只想用三元来做到这一点

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

【讨论】：

【解决方案2】：

逻辑运算符最好与三元运算符一起使用。

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

或者我建议拆分代码。

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

未测试。

【讨论】：