React Native横竖屏切换样式优化方案（基于react-native-orientation-locker）

原方案存在三个可优化的核心问题：

• 冗余存储：将完整样式存入state属于不必要的冗余，样式完全可以通过基础状态推导出来
• 重复生成样式表：每次横竖屏切换都调用StyleSheet.create生成新的样式对象，会造成不必要的性能开销
• 可变副作用：直接修改全局theme对象，容易引发其他依赖theme的组件出现不可预期的问题

具体优化步骤 #

1. 调整状态存储，只保留最小必要状态 #

只存布局类型、窗口宽高这两个动态变化的基础状态，不再存储完整样式：

// 只存不可直接推导的动态状态
const [layout, setLayout] = useState<VideoLayoutType>(getDeviceVideoLayout(initialOrientation))
const [windowSize, setWindowSize] = useState(Dimensions.get('window'))

const handleOrientationChange = (o: OrientationType): void => {
  const newLayout = getDeviceVideoLayout(o)
  const newWindowSize = Dimensions.get('window')
  setLayout(newLayout)
  setWindowSize(newWindowSize)
}

useDeviceOrientationChange((o) => {
  handleOrientationChange(o)
}) 

2. 优化样式定义，提前创建静态样式表 #

将固定不变的样式提前通过StyleSheet.create创建，动态计算的部分在渲染时通过样式数组拼接即可，不需要重复生成整个样式表：

// 静态公共样式，全局只创建一次
const commonStyles = StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: theme.colors.black
  },
  actionButtonContainer: {
    width: 50,
    backgroundColor: 'rgba(242, 241, 240, 0.3)',
    borderRadius: 12,
    marginBottom: 20
  }
})

// 不同方向的静态布局样式，全局只创建一次
const layoutStyles = StyleSheet.create({
  portraitActionContainer: {
    position: 'absolute',
    right: theme.spacing.sm
  },
  landscapeLeftActionContainer: {
    position: 'absolute',
    top: theme.spacing.sm,
    right: theme.spacing.sm
  },
  landscapeRightActionContainer: {
    position: 'absolute',
    top: theme.spacing.sm,
    right: theme.spacing.sm
  }
})

3. 渲染时动态拼接样式 #

在组件渲染阶段，根据当前状态计算动态样式，和静态样式拼接使用即可：

// 渲染前动态计算当前生效样式
const getCurrentStyles = () => {
  const { height } = windowSize
  const commonContainerStyle = [commonStyles.container, { height }]
  
  let actionContainerStyle
  if (layout === 'LANDSCAPE-RIGHT') {
    actionContainerStyle = [
      layoutStyles.landscapeRightActionContainer,
      { right: theme.spacing.sm + theme.layout.insets.top }
    ]
  } else if (layout === 'LANDSCAPE-LEFT') {
    actionContainerStyle = layoutStyles.landscapeLeftActionContainer
  } else {
    actionContainerStyle = [
      layoutStyles.portraitActionContainer,
      { bottom: theme.spacing.sm + theme.layout.insets.bottom + 40 + bottomSpace }
    ]
  }

  return {
    container: commonContainerStyle,
    actionButtonContainer: commonStyles.actionButtonContainer,
    actionContainer: actionContainerStyle
  }
}

// 组件渲染部分直接调用即可
const styles = getCurrentStyles()
return (
  <View style={styles.container}>
    <View style={styles.actionContainer}>
      <TouchableOpacity style={styles.actionButtonContainer} />
    </View>
  </View>
)

优化收益 #

• 状态更精简：只存储不可推导的动态值，没有冗余数据
• 性能更好：样式表只创建一次，避免重复生成对象的开销
• 逻辑更安全：不再修改全局theme对象，避免副作用
• 可维护性更高：动态样式的计算逻辑集中在一处，调整更方便

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