基础篇_样式

在 React Native 中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的 核心组件 都接受名为 style 的属性。这些 样式名 基本上是遵循了 web 上的 CSS 的命名,只是按照 JS 的语法要求使用了驼峰命名法,例如将 background-color 改为backgroundColor。

style 属性可以是一个普通的 JavaScript 对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组 —— 在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂,我们建议使用 StyleSheet.create [ ʃiːt ] 来集中定义组件的样式。比如像下面这样:

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

class MyApp extends Component {
    render() {
        return (
                <View>
                <Text style={styles.red}> just red </Text>
                <Text style={styles.bigblue}> just bigblue</Text>
                <Text style={[styles.bigblue,styles.red]}>bigblue,then red </Text>
                <Text style={[styles.red,styles.bigblue]}>red ,then bigblue </Text>
                </View>
               );
    }
    
}

const styles = StyleSheet.create({
                                 
                                 bigblue:{
                                 color:'blue',
                                 fontWeight:'bold',
                                 fontSize: 30,
                                 },
                                 
                                 red: {
                                 color: 'red',
                                 },
                                 
                                 });

AppRegistry.registerComponent('MyApp', () => MyApp);

常见的做法是按顺序声明和使用 style 属性,以借鉴CSS中的“层叠”做法(即后声明的属性会覆盖先声明的同名属性)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容