編碼的世界 / 優質文選 / 生涯

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

2021年8月23日
-

一、Web端CSS的使用
CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用於（增強）控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。
如何將樣式表加入您的網頁：
你可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。
內聯方式 Inline Styles 內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例代碼：

內部樣式塊對象 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;

編碼的世界 / 優質文選 / 生涯

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

熱門文章