React Native 如何更简洁地根据设备方向切换样式表

你当前的实现最大的问题是存在大量重复的样式代码，两套样式完全同构仅部分属性值不同，可以通过抽离公共样式+动态合并差异化配置的方式简化实现，核心优化点有两个：一是消除重复的样式定义，二是避免在每个组件的style属性中反复写三元判断。

具体实现代码 #

第一步：抽离公共样式，仅保留差异化配置 #

// 所有横竖屏通用的样式统一在这里定义，只维护一份
const commonStyles = {
  volumeFaderWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  volumeSlider: {
    flex: 3,
  },
  volumeText: {
    flex: 2,
  },
  muteBtn: {
    marginLeft: 10,
    marginRight: 10,
  },
  muteBtnLabel: {
    fontSize: 10,
  }
}

// 仅定义横竖屏有差异的样式属性
const orientationDiff = {
  // 竖屏配置
  portrait: {
    container: {},
    volumeFaderWrapper: {
      margin: 10
    },
    volumeText: {
      textAlign: 'justify'
    }
  },
  // 横屏配置
  landscape: {
    container: {
      flex: 2
    },
    volumeFaderWrapper: {
      padding: 9
    },
    volumeText: {
      textAlign: 'right'
    }
  }
}

// 封装样式生成方法，传入方向值直接返回合并后的完整样式表
const getOrientationStyles = (isPortrait) => {
  const diffConfig = orientationDiff[isPortrait ? 'portrait' : 'landscape']
  const mergedStyles = {}
  // 合并公共样式和差异化配置
  Object.keys(commonStyles).forEach(key => {
    mergedStyles[key] = { ...commonStyles[key], ...diffConfig[key] }
  })
  // 补充差异化配置里独有的样式（比如这里的container）
  Object.keys(diffConfig).forEach(key => {
    if (!mergedStyles[key]) mergedStyles[key] = diffConfig[key]
  })
  return StyleSheet.create(mergedStyles)
}

第二步：组件内简化调用 #

组件内只需要在orientation状态更新时，调用上面的方法拿到当前生效的样式表即可，不需要再给每个样式写三元判断：

// 假设orientation是你已经定义好的布尔值状态，true为竖屏false为横屏
const styles = getOrientationStyles(orientation)

// 渲染时直接调用对应样式即可
<View style={styles.volumeFaderWrapper}>
    <Text>Hello World</Text>
    ...
</View>

轻量场景简化方案 #

如果你的项目里差异样式非常少，也可以直接用样式数组的方式合并差异化属性，不需要单独封装生成方法：

// 公共样式提前用StyleSheet创建好
const commonStyles = StyleSheet.create({
  // 通用样式定义同上
})

// 组件内调用时仅对差异属性做判断
<View style={[
  commonStyles.volumeFaderWrapper,
  orientation ? {margin: 10} : {padding: 9}
]}>
  <Text style={[
    commonStyles.volumeText,
    {textAlign: orientation ? 'justify' : 'right'}
  ]}>
    Hello World
  </Text>
</View>

这两种方案都比你现在的写法冗余度更低，后续维护也更方便，修改通用样式不需要横竖屏各改一次，新增样式时如果没有方向差异只需要在公共样式里加一次即可。

内容的提问来源于stack exchange，提问作者Jerry seigle