React Native 之 StyleSheet （十）

react-native 中的 StyleSheet 是一个非常重要的工具，它允许我们以一种更加简洁和可维护的方式来编写和管理样式。在react-native 中，我们不能直接使用像 web 开发中的 CSS 那样直接写样式，而是需要将样式对象传递给组件的 style属性。

StyleSheet 的主要原理是：

• 创建样式对象：**你创建一个或多个 JavaScript 对象，这些对象描述了组件的样式属性（如 color、fontSize、flex 等）。
• 性能优化：StyleSheet 会对这些样式对象进行优化，例如合并重复的样式规则，以减少不必要的内存使用和渲染开销。
• 引用样式：你可以通过 StyleSheet.create() 方法来创建一个样式对象，并获取一个带有唯一 ID 的引用。然后，你可以将这些引用传递给组件的 style 属性。
• 动态样式：虽然 StyleSheet 主要用于静态样式，但你也可以在运行时动态地改变组件的样式。这通常是通过将 StyleSheet 样式与内联样式对象合并来实现的。

代码栗子：

import React from 'react';  
import { View, Text, StyleSheet } from 'react-native';  
  
const MyComponent = () => {  
  return (  
    <View style={styles.container}>  
      <Text style={styles.title}>Hello, React Native!</Text>  
      <Text style={[styles.text, { color: 'blue' }]}>This is a blue text.</Text>  
    </View>  
  );  
};  
  
// 使用 StyleSheet.create() 创建样式对象  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor: '#F5FCFF',  
  },  
  title: {  
    fontSize: 20,  
    fontWeight: 'bold',  
    marginBottom: 10,  
  },  
  text: {  
    fontSize: 16,  
    color: 'black',  
  },  
});  
  
export default MyComponent;