React Native样式系统 #

概述 #

React Native 使用 StyleSheet 来定义样式，语法类似于 CSS，但有一些重要区别。样式使用 JavaScript 对象表示，所有尺寸单位都是无单位的数字，表示逻辑像素。

StyleSheet 基础 #

创建样式 #

tsx

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

const StylesExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>Welcome to styling</Text>
    </View>
  );
};

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

export default StylesExample;

内联样式 #

tsx

const InlineStyle = () => {
  return (
    <View style={{flex: 1, backgroundColor: '#fff', padding: 16}}>
      <Text style={{fontSize: 18, color: '#333'}}>Inline styled text</Text>
    </View>
  );
};

样式数组 #

可以传递样式数组，后面的样式会覆盖前面的：

tsx

const StyleArray = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={[styles.container, isActive && styles.activeContainer]}>
      <Text style={[styles.text, isActive && styles.activeText]}>
        Conditional styling
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  activeContainer: {
    backgroundColor: '#007AFF',
  },
  text: {
    fontSize: 16,
    color: '#333',
  },
  activeText: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

尺寸单位 #

逻辑像素 #

React Native 中所有尺寸都是逻辑像素（dp），无需单位：

tsx

const styles = StyleSheet.create({
  box: {
    width: 100,     // 100 逻辑像素
    height: 100,    // 100 逻辑像素
    margin: 10,     // 10 逻辑像素
    padding: 16,    // 16 逻辑像素
    fontSize: 14,   // 14 逻辑像素
  },
});

百分比 #

宽度和高度支持百分比：

tsx

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '50%',
  },
  half: {
    width: '50%',
  },
});

响应式尺寸 #

使用 Dimensions API 获取屏幕尺寸：

tsx

import {Dimensions} from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    width: width * 0.8,
    height: height * 0.3,
  },
});

布局样式 #

Flexbox 属性 #

React Native 使用 Flexbox 进行布局：

tsx

const FlexboxExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: '#FF6B6B',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: '#4ECDC4',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: '#45B7D1',
  },
});

常用布局属性 #

属性	说明	值
flex	弹性比例	number
flexDirection	主轴方向	row, column
justifyContent	主轴对齐	flex-start, center, flex-end, space-between, space-around
alignItems	交叉轴对齐	flex-start, center, flex-end, stretch
alignSelf	自身对齐	auto, flex-start, center, flex-end, stretch
flexWrap	换行方式	wrap, nowrap
position	定位方式	relative, absolute

绝对定位 #

tsx

const AbsolutePosition = () => {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text>Content</Text>
      </View>
      <View style={styles.badge}>
        <Text style={styles.badgeText}>3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 100,
    height: 100,
  },
  content: {
    flex: 1,
    backgroundColor: '#007AFF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  badge: {
    position: 'absolute',
    top: -5,
    right: -5,
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#FF3B30',
    justifyContent: 'center',
    alignItems: 'center',
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
});

文本样式 #

字体属性 #

tsx

const TextStyleExample = () => {
  return (
    <View>
      <Text style={styles.normal}>Normal text</Text>
      <Text style={styles.bold}>Bold text</Text>
      <Text style={styles.italic}>Italic text</Text>
      <Text style={styles.customFont}>Custom font text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  normal: {
    fontSize: 16,
    color: '#333',
  },
  bold: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  italic: {
    fontSize: 16,
    fontStyle: 'italic',
  },
  customFont: {
    fontSize: 16,
    fontFamily: 'CustomFont-Regular',
  },
});

文本对齐 #

tsx

const styles = StyleSheet.create({
  left: {
    textAlign: 'left',
  },
  center: {
    textAlign: 'center',
  },
  right: {
    textAlign: 'right',
  },
  justify: {
    textAlign: 'justify',
  },
});

行高与字间距 #

tsx

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    lineHeight: 24,
    letterSpacing: 1,
  },
});

颜色 #

颜色格式 #

React Native 支持多种颜色格式：

tsx

const ColorExample = () => {
  return (
    <View>
      <View style={{backgroundColor: '#007AFF'}} />
      <View style={{backgroundColor: 'rgb(0, 122, 255)'}} />
      <View style={{backgroundColor: 'rgba(0, 122, 255, 0.5)'}} />
      <View style={{backgroundColor: 'blue'}} />
    </View>
  );
};

透明度 #

tsx

const styles = StyleSheet.create({
  transparent: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  opacity: {
    opacity: 0.5,
  },
});

边框 #

边框样式 #

tsx

const BorderExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.allBorder} />
      <View style={styles.topBorder} />
      <View style={styles.rounded} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  allBorder: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 20,
  },
  topBorder: {
    width: 100,
    height: 100,
    borderTopWidth: 2,
    borderTopColor: '#007AFF',
    marginBottom: 20,
  },
  rounded: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#007AFF',
  },
});

单边边框 #

tsx

const styles = StyleSheet.create({
  top: {
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  bottom: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  left: {
    borderLeftWidth: 1,
    borderLeftColor: '#ccc',
  },
  right: {
    borderRightWidth: 1,
    borderRightColor: '#ccc',
  },
});

圆角 #

tsx

const styles = StyleSheet.create({
  rounded: {
    borderRadius: 8,
  },
  circle: {
    borderRadius: 50,
  },
  topRounded: {
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
});

阴影 #

iOS 阴影 #

tsx

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

Android 阴影 #

Android 使用 elevation 属性：

tsx

const styles = StyleSheet.create({
  shadow: {
    elevation: 5,
  },
});

跨平台阴影 #

tsx

import {Platform} from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

变换 #

平移、旋转、缩放 #

tsx

const TransformExample = () => {
  return (
    <View style={styles.container}>
      <View style={[styles.box, styles.translate]} />
      <View style={[styles.box, styles.rotate]} />
      <View style={[styles.box, styles.scale]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#007AFF',
    margin: 20,
  },
  translate: {
    transform: [{translateX: 50}, {translateY: 25}],
  },
  rotate: {
    transform: [{rotate: '45deg'}],
  },
  scale: {
    transform: [{scaleX: 1.5}, {scaleY: 1.5}],
  },
});

样式组织 #

分离样式文件 #

创建 styles.ts 文件：

tsx

import {StyleSheet} from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

在组件中使用：

tsx

import {styles} from './styles';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Title</Text>
    </View>
  );
};

主题化 #

tsx

const colors = {
  primary: '#007AFF',
  secondary: '#5856D6',
  background: '#F5F5F5',
  text: '#333333',
  error: '#FF3B30',
};

const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

const typography = {
  h1: {
    fontSize: 32,
    fontWeight: 'bold',
  },
  h2: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  body: {
    fontSize: 16,
  },
  caption: {
    fontSize: 12,
    color: '#999',
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
    padding: spacing.md,
  },
  title: {
    ...typography.h1,
    color: colors.text,
    marginBottom: spacing.sm,
  },
});

平台特定样式 #

Platform.select #

tsx

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

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

平台特定文件 #

创建 Button.ios.tsx 和 Button.android.tsx，React Native 会自动选择正确的文件。

总结 #

React Native 的样式系统基于 Flexbox，使用 JavaScript 对象定义样式：

使用 StyleSheet.create 创建样式
所有尺寸单位为逻辑像素
支持 Flexbox 布局
支持多种颜色格式
支持变换和阴影效果
可以使用 Platform.select 处理平台差异

继续学习布局与Flexbox，深入了解 Flexbox 布局。