React native之路（五）Style

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React native之路（五）Style相关的知识，希望对你有一定的参考价值。

参考技术A 本来这一篇准备学习state，可是感觉state这东西理解容易，真正使用感觉太模糊，官方的例子也有点过于简单，所以准备学习完其他方面的知识在结合实例再搞清楚state的用法及原理，所以这篇先学习Style。
Style翻译过来就是样式，react-native中的style其实和js中的style没有什么大的区别，只不过把js中的一些用-连接的属性名称改成了小驼峰命名规则。
官方建议我们为了以后组件的可维护性以及扩展性组件的样式采用StyleSheet.create的方式来声明，例如：

调用

组件可以使用样式数组，但最终效果以数组中最后一个样式显示为准（如果属性重复会覆盖已有属性），比如现在有两个样式style1和style2

两个style均有一个color属性，如果这样使用

显示效果

可以看到第三行显示效果保留了style1的大小，但color属性值确是由style2设置而不是来自style1，也就是所说的属性继承关系。根据这个特点在开发中就可根据需求自定义各种style了。

目前react-native支持的最新style属性值如下：

textAlignVertical
includeFontPadding
textDecorationLine
textDecorationStyle
textDecorationColor
writingDirection

1 top, marginTop, paddingTop 的区别

top:组件目前位置相对于屏幕上方的距离，不会调整其他组件的位置，所以可能会与其他组件重叠
例如：

显示效果为：

marginTop：组件距离父容器上方的距离，会调整其他组件的位置
例如：

显示效果为：

paddingTop ：组件内容据上内边距的距离，会向外扩展组件。
例如：

显示效果为：

其他 padding，margin同理。
2 marginVertical 设置水平方向左右的margin，同marginLeft和marginRight叠加效果相同。同理marginHorizontal，paddingVertical，paddingHorizontal；
3 borderWidth边框宽度，也可以设置单个方向的边框，通过borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth，颜色同理；
4 position：两个属性，absolute（绝对）和relative（相对）默认为相对。
默认：

relative：

React Native 爬坑之路

1.react 基础 （创建组件及在浏览器上渲染组件）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	// 8.需求：渲染一行标题,显示"Hello React"
	//
	/*
		ReactDOM.render()
		React的基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中

		3个参数
		第一个：模板的渲染内容(HTML形式)
		第二个：这段模板需要插入的DOM节点(本程序中,是id为container的div节点)
		第三个：渲染后的回调,一般不用
	*/

	// ReactDOM.render(
	// 	<h1>Hello React</h1>,
	// 	document.getElementById("container")
	// );

	/*
		JSX入门

		JSX不是一门新的语言,是个语法(语法糖)
	*/

	// 1.JSX必须借助React环境运行

	// 2.JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来,
	// 可以像XML一样书写

	ReactDOM.render(
		<h1>
			Hello React
		</h1>,
		document.getElementById("container")
	);

	// 3.转换：JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转化成JavaScript代码执行

	ReactDOM.render(
		React.createElement("h1",null,"Hello React"),
		document.getElementById("container")
	);

	// 4.在JSX中运行JavaScript代码
	// 使用{}括起来  {表达式}
	//

	var text = "百度";
	ReactDOM.render(
		<h1>{text}</h1>,
		document.getElementById("container")
	);

	// 5.例如：属性、设置样式、事件绑定
</script>
</html>

 

2.设置组件样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

	<style>
		.pStyle {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	/*
		创建一个组件类,用于输出Hello React

		1.React中创建的组件类以大写字母开头,驼峰命名法
		2.在React中使用React.createClass方法创建一个组件类
		3.核心代码：每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值：null、false、组件模板
		4.注意：组件类只能包含一个顶层标签             
	*/

	// var HelloMessage = React.createClass({
	// 	render:function(){
	// 		return <h1>Hello React</h1>;
	// 	}
	// });

	// // 渲染
	// ReactDOM.render(
	// 	// 在模板中插入<HelloMessage />会自动生成一个实例
	// 	<HelloMessage />,
	// 	document.getElementById("container")
	// );

	/*
		设置组件的样式,三种：
		1.内联样式
		2.对象样式
		3.选择器样式

		注意：在React和HTML5中设置样式时的书写格式是有区别的
		* 1.HTML5以 ; 结尾
			React以 , 结尾
		* 2.HTML5中key、value都不加引号
			React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法(例：backgroundColor)。如果value为字符串,需要加引号。
		* 3.HTML5中,value如果是数字,需要带单位
			React中不需要带单位

		* 我们定义一个组件类,同时使用三种设置组件样式的方式
		* 需求：定义一个组件,分为上下两行显示内容
		* <div> 内联样式：设置背景颜色,边框大小,边框颜色
		* 	<h1></h1> 对象样式：设置背景颜色,字体颜色
		* 	<p></p> 选择器样式：设置字体大小
		* </div>
		*
		* class 和 for 是React中的保留字
		* 注意：在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换。
		* 类似的：使用htmlFor替换for
	*/

	// 创建设置h1样式对象
	var hStyle = {
		backgroundColor:"green",
		color:"red"
	}
	// 创建组件 通过this.props传值
	var ShowMessage = React.createClass({
		render:function() {
			return (
				// 外面的{}是JSX语法,里面的{}表示对象
				<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>

 

3.复合组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码

	/*
		复合组件

		也被称为组合组件,创建多个组件合成一个组件。
	*/

	/*
		定义一个组件WebShow。功能：输出网站的名字和网址,网址是一个可以点击的链接。
		分析：定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,兵器可以点击
	*/

	// 定义WebName组件
	var WebName = React.createClass({
		render:function() {
			return <h1>百度</h1>;
		}
	});

	// 定义WebLink组件
	var WebLink = React.createClass({
		render:function() {
			return <a href="http://www.baidu.com">http://www.baidu.com</a>;
		}
	});

	// 定义复合组件 WebShow
	var WebShow = React.createClass({
		render:function() {
			return (
				// 嵌套组件
				<div>
					<WebName />
					<WebLink />
				</div>
			);
		}
	});

	// 将组件类WebShow渲染到网页上
	ReactDOM.render(
		<WebShow />,
		document.getElementById("container")
	);
</script>
</html>

 

4.

以上是关于React native之路（五）Style的主要内容，如果未能解决你的问题，请参考以下文章

React-Native之路上遇到的问题

Android开发学习之路--React-Native混合开发初体验

弃坑 React-Native，开启入坑 Flutter 之路

react native初学之路--报 operation not permitted错误

react.js学习之路五

React Native（五）实现列表