ReactNative--组件的样式
Posted 车宝的笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ReactNative--组件的样式相关的知识，希望对你有一定的参考价值。
设置组件的样式，讲解三种：
1 内联样式
2 对象样式
3 选择器样式
注意：在React和html5中设置样式时的书写格式是有一定区别的
1 HTML5以；结尾
React以，结尾
2 HTML中key，value都不加引号
React中属于javascript对象，key的名字不能出现"-"，需要使用驼峰命名法。如果value为字符串，需要加引号
3 HTML5中，value如果是数字，需要带单位
React中不需要带单位
我们定义一个组件类，同事使用三种设置组件样式的方法
需求：定义一个组件，分为上下两行显式内容
<div> 内联样式：设置背景颜色，边框大小，边框颜色
<h1></h1> 对象样式：设置北京颜色，字体颜色
<p></p> 选择器样式：设置字体大小
</div>
注意：在React中使用选择器样式设置组件样式时，属性名不能使用class，需要使用className替换
类似的：使用htmlFor替换for
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./build/react.js" charset="utf-8"></script> <script src="./build/react-dom.js" charset="utf-8"></script> <script src="./build/browser.min.js" charset="utf-8"></script> <style> .pStyle { font-size: 20px; } </style> </head> <body> <div id="container"></div> </body> <script type="text/babel"> //创建设置h1样式对象 var hStyle = { backgroundColor:"green", color:"red" } var ShowMessage = React.createClass({ render:function () { return ( <div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"black", borderStyle:"solid"}}> <h1 style={hStyle}>{this.props.firstRow}</h1> <p className="pStyle">{this.props.secondRow}</p> </div> ) } }); ReactDOM.render( <ShowMessage firstRow="你好" secondRow="兰圃"/>, document.getElementById("container") ) </script> </html>
以上是关于ReactNative--组件的样式的主要内容，如果未能解决你的问题，请参考以下文章
ReactNative简介开发环境调试常用组件useState状态FlatList组件SectionList组件Platform 模块定义样式图片组件触摸事件打包apk发布版