编程马·菜鸟教程

Appearance

RN 样式语法（StyleSheet） ​

React Native 核心基础 ​

在 React Native 中，样式是构建用户界面的重要组成部分。与 Web 开发不同，React Native 使用 StyleSheet API 来定义和管理样式。

1. 基本样式语法 ​

内联样式 ​

最简单的样式定义方式是使用内联样式，直接在组件的 style 属性中定义样式对象。

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

export default function InlineStyleExample() {
  return (
    <View style={{ backgroundColor: '#f0f0f0', padding: 20 }}>
      <Text style={{ fontSize: 20, color: '#333' }}>Hello, React Native!</Text>
    </View>
  );
}

StyleSheet.create ​

推荐使用 StyleSheet.create 方法来定义样式，这样可以获得更好的性能和代码组织。

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

export default function StyleSheetExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>Welcome to style guide</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f0f0f0',
    padding: 20,
    borderRadius: 8,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

2. 样式属性 ​

常用样式属性 ​

属性描述示例
width宽度width: 100
height高度height: 50
backgroundColor背景颜色backgroundColor: '#4CAF50'
padding内边距padding: 10
margin外边距margin: 10
borderWidth边框宽度borderWidth: 1
borderColor边框颜色borderColor: '#ccc'
borderRadius边框圆角borderRadius: 8
fontSize字体大小fontSize: 16
fontWeight字体粗细fontWeight: 'bold'
color文字颜色color: '#333'
textAlign文字对齐方式textAlign: 'center'
flexDirection弹性布局方向flexDirection: 'row'
justifyContent主轴对齐方式justifyContent: 'center'
alignItems交叉轴对齐方式alignItems: 'center'
flex弹性比例flex: 1

示例 ​

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 20,
  },
  box1: {
    width: 100,
    height: 100,
    backgroundColor: '#4CAF50',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: '#2196F3',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#0D47A1',
  },
  box3: {
    width: 100,
    height: 100,
    backgroundColor: '#FFC107',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

3. 样式继承 ​

在 React Native 中，样式不会像 CSS 那样继承。每个组件的样式都是独立的，需要显式设置。

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

export default function StyleInheritanceExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.parentText}>Parent Text</Text>
      <View style={styles.childContainer}>
        <Text style={styles.childText}>Child Text</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  parentText: {
    fontSize: 20,
    color: '#333',
    fontWeight: 'bold',
  },
  childContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#f0f0f0',
  },
  childText: {
    // 不会继承 parentText 的样式，需要显式设置
    fontSize: 16,
    color: '#666',
  },
});

4. 样式组合 ​

可以通过数组来组合多个样式对象。

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

export default function StyleCombinationExample() {
  return (
    <View style={styles.container}>
      <Text style={[styles.baseText, styles.titleText]}>Title Text</Text>
      <Text style={[styles.baseText, styles.subtitleText]}>Subtitle Text</Text>
      <Text style={[styles.baseText, styles.highlightText]}>Highlight Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  baseText: {
    fontSize: 16,
    marginBottom: 10,
  },
  titleText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitleText: {
    fontSize: 18,
    color: '#666',
  },
  highlightText: {
    color: '#4CAF50',
    fontWeight: '500',
  },
});

5. 动态样式 ​

可以根据条件动态生成样式。

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

export default function DynamicStyleExample() {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.button, isPressed && styles.buttonPressed]}
        onPress={() => setIsPressed(!isPressed)}
      >
        <Text style={[styles.buttonText, isPressed && styles.buttonTextPressed]}>
          {isPressed ? 'Pressed' : 'Press Me'}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#4CAF50',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  buttonPressed: {
    backgroundColor: '#388E3C',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
  buttonTextPressed: {
    color: '#E8F5E9',
  },
});

6. 样式常量 ​

可以使用常量来定义常用的样式值，提高代码的可维护性。

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

// 样式常量
const COLORS = {
  primary: '#4CAF50',
  secondary: '#2196F3',
  danger: '#f44336',
  background: '#f5f5f5',
  text: '#333',
};

const SPACING = {
  small: 8,
  medium: 16,
  large: 24,
};

const FONT_SIZES = {
  small: 12,
  medium: 16,
  large: 20,
  xlarge: 24,
};

export default function StyleConstantsExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Style Constants Example</Text>
      <View style={styles.box}>
        <Text style={styles.boxText}>Using style constants makes it easier to maintain consistent styles across your app.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
    padding: SPACING.large,
  },
  title: {
    fontSize: FONT_SIZES.xlarge,
    fontWeight: 'bold',
    color: COLORS.text,
    marginBottom: SPACING.medium,
  },
  box: {
    backgroundColor: COLORS.primary,
    padding: SPACING.medium,
    borderRadius: 8,
  },
  boxText: {
    fontSize: FONT_SIZES.medium,
    color: '#fff',
  },
});

7. 平台特定样式 ​

可以使用 Platform API 为不同平台设置不同的样式。

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    ...Platform.select({
      ios: {
        backgroundColor: '#E3F2FD',
      },
      android: {
        backgroundColor: '#E8F5E9',
      },
      web: {
        backgroundColor: '#FFF3E0',
      },
    }),
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    ...Platform.select({
      ios: {
        color: '#1976D2',
      },
      android: {
        color: '#388E3C',
      },
      web: {
        color: '#E65100',
      },
    }),
  },
});

8. 样式最佳实践 ​

1. 使用 StyleSheet.create ​

使用 StyleSheet.create 而不是内联样式，这样可以获得更好的性能。

2. 组织样式文件 ​

将样式文件组织成模块，提高代码的可维护性。

jsx
// styles/global.js
import { StyleSheet } from 'react-native';

export const globalStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  // 其他全局样式...
});

// styles/components.js
import { StyleSheet } from 'react-native';

export const componentStyles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  card: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
  },
  // 其他组件样式...
});

3. 使用样式常量 ​

定义颜色、间距、字体大小等常量，确保应用风格一致。

4. 避免过度使用嵌套 ​

尽量避免过度嵌套样式，保持样式结构清晰。

5. 使用 flexbox 布局 ​

使用 flexbox 布局来创建响应式界面。

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

问题 1：样式不生效 ​

问题：设置的样式没有生效。

解决方案：

  • 检查样式属性名称是否正确
  • 检查样式值是否有效
  • 检查样式优先级，后定义的样式会覆盖先定义的样式
  • 确保样式对象的结构正确

问题 2：布局错乱 ​

问题：组件布局不符合预期。

解决方案：

  • 检查 flexbox 布局属性
  • 确保容器有足够的空间
  • 检查边距和内边距设置
  • 使用 console.log 打印组件尺寸进行调试

问题 3：平台差异 ​

问题：样式在不同平台上表现不一致。

解决方案：

  • 使用 Platform.select 为不同平台设置不同的样式
  • 测试不同平台的表现
  • 考虑使用第三方样式库来处理平台差异

10. 总结 ​

React Native 的样式系统使用 StyleSheet API，它提供了一种声明式的方式来定义和管理样式。通过合理使用样式语法、样式组合、动态样式和平台特定样式，可以创建出美观、一致的用户界面。

在实际开发中，建议：

  1. 使用 StyleSheet.create 定义样式
  2. 组织样式文件，提高代码可维护性
  3. 使用样式常量，确保风格一致
  4. 合理使用 flexbox 布局
  5. 测试不同平台的表现

通过掌握 React Native 的样式语法，你可以创建出更加美观、专业的移动应用界面。

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

基于 VitePress 构建