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

来源：互联网发布：淘宝客内部优惠券编辑：程序博客网时间：2024/06/06 20:41

一、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 0