React Native 针对指定屏幕尺寸实现可缩放样式表的方法

你原有代码存在4个核心错误：

• JavaScript 不支持 0 <= width <= 520 这种连续比较语法，会出现逻辑判断失效的问题
• styles 变量在块级作用域内声明，外部无法访问
• 百分比格式错误，React Native 中百分比宽度写法是 '100%' 而非 '%100'
• 代码括号未正确闭合，语法不合法

基础修正版实现 #

不需要重复创建 StyleSheet 实例，只把动态的样式值抽离即可：

import { useWindowDimensions, StyleSheet } from 'react-native';

// 组件内部逻辑
const { width } = useWindowDimensions();
let containerWidth;

if (width < 520) {
  containerWidth = '100%';
} else if (width < 768) {
  containerWidth = '70%';
} else {
  containerWidth = '50%';
}

const styles = StyleSheet.create({
  container: {
    width: containerWidth,
    // 其余所有断点通用的样式统一写在这里即可
  },
  // 其他全局样式也统一在此声明
});

更优实现方案 #

抽离通用响应式Hook #

把断点判断逻辑封装为可复用的自定义Hook，所有组件都可以直接调用：

// hooks/useResponsive.js
import { useWindowDimensions } from 'react-native';

export const useResponsive = () => {
  const { width } = useWindowDimensions();
  return {
    // 对应你的三个断点区间
    isSmall: width < 520,
    isMedium: width >= 520 && width < 768,
    isLarge: width >= 768
  }
}

组件内调用方式：

import { useResponsive } from '../hooks/useResponsive';

// 组件内部
const { isSmall, isMedium } = useResponsive();
const styles = StyleSheet.create({
  container: {
    width: isSmall ? '100%' : isMedium ? '70%' : '50%'
  }
});

多动态属性场景用样式数组合并 #

如果有多个样式属性需要响应式调整，用样式数组拼接公共样式和响应式样式即可，维护成本更低：

// 公共通用样式
const commonStyles = StyleSheet.create({
  container: {
    padding: 16,
    alignSelf: 'center',
    // 所有断点通用的属性都放在这里
  }
})

// 各断点专属样式
const responsiveStyles = StyleSheet.create({
  small: { width: '100%', fontSize: 14 },
  medium: { width: '70%', fontSize: 15 },
  large: { width: '50%', fontSize: 16 }
})

// 组件渲染时直接拼接
const { isSmall, isMedium } = useResponsive();
return (
  <View style={[
    commonStyles.container,
    isSmall ? responsiveStyles.small : isMedium ? responsiveStyles.medium : responsiveStyles.large
  ]}>
    {/* 内容 */}
  </View>
)

注：useWindowDimensions 本身会监听窗口尺寸变化，横竖屏切换、窗口大小调整时会自动触发重渲染，无需额外绑定监听事件。

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