React Native中的CSS的三种使用方式

最新推荐文章于 2024-05-16 01:28:27 发布

锐心凌志

最新推荐文章于 2024-05-16 01:28:27 发布

阅读量1.3w

点赞数

分类专栏： IOS混合开发 Android

本文链接：https://blog.csdn.net/pochenpiji159/article/details/64968249

版权

Android 同时被 2 个专栏收录

134 篇文章 3 订阅

订阅专栏

IOS混合开发

8 篇文章 0 订阅

订阅专栏

一、Web端CSS的使用

CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

如何将样式表加入您的网页：

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

内联方式 Inline Styles 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例代码： Snip20160902_1

内部样式块对象 Embedding a Style Block 你可以在你的HTML文档的<head>标记里插入一个<style>块对象。示例代码：

外部样式表 Linking to a Style Sheet 你可以先建立外部样式表文件*.css，然后使用HTML的link对象。示例代码：

二、React Native中CSS

内联样式

对象样式

使用Stylesheet.Create

样式拼接

导出样式对象

下面的代码是index.ios.js中的代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import liyuechun from './styles'

var textStyle = {
  fontSize:15,
  backgroundColor:'#DAC',
  textAlign:'center'
};

class YZDemo extends Component {
  render() {
    return (
      <View style={
        {
          width: 300,
          height: 600,
          backgroundColor: 'red',
          padding: 50,
          margin: 10
        }
      }>

        <Text style={textStyle}>
          www.52learn.wang
        </Text>  

        <Text style={liyuechun.yuzhi}>
          匠心品质
        </Text>

        <Text style={liyuechun.liangxin}>
          良心育人
        </Text>

        <Text style={[liyuechun.textFontSize, liyuechun.textBGColor]}>
          黎跃春
        </Text>

        <Text style={[liyuechun.textFontSize, {backgroundColor: 'yellow'}]}>
          欢迎大家来到育知同创
        </Text>
      </View>
    );
  }
}

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

下面的代码是styles.js的代码：

import React from 'react';
import {
  StyleSheet
} from 'react-native';

var liyuechun = StyleSheet.create(
{
  yuzhi: {
    fontSize: 40,
    color: 'green',
    marginTop: 40,
    backgroundColor: 'blue'
  },

  liangxin: {
    fontSize: 80,
    backgroundColor: '#FFF',
    marginTop: 5
  },

  textFontSize: {
    fontSize: 20
  },
  textBGColor: {
    backgroundColor: '#F88'
  }
});

module.exports = liyuechun;

锐心凌志

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
React Native中的CSS的三种使用方式

一、Web端CSS的使用CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。如何将样式表加入您的网页：你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。内联方式 Inline St
复制链接

扫一扫