编程马·菜鸟教程

Appearance

尺寸单位：dp / 百分比 ​

React Native 核心基础 ​

在 React Native 中，了解和使用正确的尺寸单位是创建响应式界面的关键。本文将介绍 React Native 中常用的尺寸单位及其使用方法。

1. 基本尺寸单位 ​

密度无关像素 (dp) ​

在 React Native 中，默认的尺寸单位是密度无关像素（Density-Independent Pixels，简称 dp）。它是一种与设备屏幕密度无关的单位，确保在不同密度的屏幕上显示效果一致。

jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function DpExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>100x100 dp</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100, // 100 dp
    height: 100, // 100 dp
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

百分比 ​

除了 dp 外，React Native 还支持使用百分比作为尺寸单位，这对于创建响应式布局非常有用。

jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function PercentageExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>50% 宽度</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  box: {
    width: '50%', // 50% 宽度
    height: 100,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

2. 屏幕尺寸 ​

Dimensions API ​

使用 Dimensions API 可以获取屏幕的宽度和高度，这对于创建响应式布局非常重要。

jsx
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

export default function ScreenSizeExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>屏幕宽度: {width} dp</Text>
      <Text style={styles.text}>屏幕高度: {height} dp</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

响应式布局 ​

结合 Dimensions API 和百分比，可以创建响应式布局。

jsx
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

export default function ResponsiveLayoutExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>响应式宽度</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  box: {
    width: width * 0.8, // 屏幕宽度的 80%
    height: 100,
    backgroundColor: '#FFC107',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  text: {
    color: '#333',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

3. 字体大小 ​

基本字体大小 ​

字体大小也使用 dp 作为单位，确保在不同屏幕密度上显示一致。

jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function FontSizeExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.largeText}>大号字体 (24dp)</Text>
      <Text style={styles.mediumText}>中号字体 (16dp)</Text>
      <Text style={styles.smallText}>小号字体 (12dp)</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  largeText: {
    fontSize: 24,
    marginBottom: 10,
  },
  mediumText: {
    fontSize: 16,
    marginBottom: 10,
  },
  smallText: {
    fontSize: 12,
  },
});

响应式字体大小 ​

可以根据屏幕尺寸动态调整字体大小。

jsx
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

// 根据屏幕宽度计算字体大小
const getFontSize = (baseSize) => {
  return baseSize * (width / 375); // 以 iPhone X 宽度为基准
};

export default function ResponsiveFontSizeExample() {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, { fontSize: getFontSize(24) }]}>响应式大号字体</Text>
      <Text style={[styles.text, { fontSize: getFontSize(16) }]}>响应式中号字体</Text>
      <Text style={[styles.text, { fontSize: getFontSize(12) }]}>响应式小号字体</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    marginBottom: 10,
  },
});

4. 间距 ​

固定间距 ​

使用 dp 作为单位定义固定间距。

jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function SpacingExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  box: {
    backgroundColor: '#4CAF50',
    padding: 16,
    marginBottom: 12, // 12dp 间距
    borderRadius: 8,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

响应式间距 ​

结合屏幕尺寸定义响应式间距。

jsx
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

// 根据屏幕宽度计算间距
const getSpacing = (baseSpacing) => {
  return baseSpacing * (width / 375); // 以 iPhone X 宽度为基准
};

export default function ResponsiveSpacingExample() {
  return (
    <View style={[styles.container, { padding: getSpacing(20) }]}>
      <View style={[styles.box, { marginBottom: getSpacing(12) }]}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={[styles.box, { marginBottom: getSpacing(12) }]}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    backgroundColor: '#2196F3',
    padding: 16,
    borderRadius: 8,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

5. 最佳实践 ​

1. 使用常量定义尺寸 ​

定义尺寸常量，确保应用风格一致。

jsx
// utils/dimensions.js
import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

export const SCREEN_WIDTH = width;
export const SCREEN_HEIGHT = height;

// 响应式尺寸计算
export const responsiveWidth = (percentage) => {
  return (percentage / 100) * width;
};

export const responsiveHeight = (percentage) => {
  return (percentage / 100) * height;
};

// 字体大小
export const FONT_SIZES = {
  small: 12,
  medium: 16,
  large: 20,
  xlarge: 24,
  xxlarge: 32,
};

// 间距
export const SPACING = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

2. 使用平台特定尺寸 ​

为不同平台设置不同的尺寸。

jsx
import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';

export default function PlatformSpecificDimensionsExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Platform Specific Dimensions</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: Platform.OS === 'ios' ? 20 : 16,
  },
  text: {
    fontSize: Platform.OS === 'ios' ? 18 : 16,
  },
});

3. 考虑不同屏幕尺寸 ​

确保布局在不同屏幕尺寸上都能正常显示。

jsx
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const isTablet = width >= 768;

export default function ScreenSizeConsiderationExample() {
  return (
    <View style={styles.container}>
      <View style={[styles.box, isTablet && styles.tabletBox]}>
        <Text style={[styles.text, isTablet && styles.tabletText]}>
          {isTablet ? 'Tablet Layout' : 'Phone Layout'}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  tabletBox: {
    width: 300,
    height: 300,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
  tabletText: {
    fontSize: 20,
  },
});

6. 常见问题与解决方案 ​

问题 1：布局在不同屏幕尺寸上表现不一致 ​

问题：布局在不同屏幕尺寸上显示不同。

解决方案：

  • 使用 Dimensions API 获取屏幕尺寸
  • 使用百分比或响应式计算
  • 测试不同屏幕尺寸的表现

问题 2：字体大小在不同设备上显示不一致 ​

问题：字体大小在不同设备上显示不一致。

解决方案：

  • 使用 dp 作为字体大小单位
  • 考虑使用响应式字体大小
  • 测试不同设备的表现

问题 3：间距过大或过小 ​

问题：间距在不同屏幕尺寸上看起来过大或过小。

解决方案：

  • 使用响应式间距
  • 为不同屏幕尺寸设置不同的间距
  • 测试不同设备的表现

问题 4：组件溢出屏幕 ​

问题：组件宽度超过屏幕宽度。

解决方案：

  • 使用百分比或响应式宽度
  • 考虑使用 flex 布局
  • 测试不同屏幕尺寸的表现

7. 总结 ​

在 React Native 中，使用正确的尺寸单位和响应式布局技术是创建高质量应用的关键。通过使用密度无关像素 (dp)、百分比、Dimensions API 和响应式计算，可以确保应用在不同屏幕尺寸和密度上都能提供一致的用户体验。

在实际开发中，建议：

  1. 使用常量定义尺寸和间距
  2. 考虑不同屏幕尺寸
  3. 测试不同设备的表现
  4. 使用响应式布局技术
  5. 为不同平台设置适当的尺寸

通过掌握这些尺寸单位和布局技术，你可以创建出更加美观、专业的移动应用界面。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建