最近一段时间在学习和实践React Native，针对与每篇官方教程做一些简单的注释记录。

Javascript示例的语法分析请见：Javascript for React Native语法教程 - GUIDE|Styles

虽然英文一般，但学习新知识的时候还是习惯于直接啃英文文档，理由无他，有些中文翻译实在是太烂了，而且即使翻译水平尚可也有很多知识点描述的没有英文原生文档那么准确。因此在这里只做注释性的讲解，力求对英文文档的理解更容易但是不干扰其内容。因此在文末会提供英文文档阅读时我比较陌生的词，希望也能给你帮助。

如何定义Styles

<!--基础学习一、style-->

定义Styles的方法如下，我们在React Native入门实例教程 - 一个完整的React Native例子中接触过：

var styles = Stylesheet.create({
	base: {
		width: 38,
		height: 38,
	},
	background: {
		backgroundColor: "#222222",
	},
	active: {
		borderWidth: 2,
		borderColor: "#00ff00",
	},
});

StyleSheet.create这个结构<!--or var styles?-->不是必须的但是提供给我们很多好处。通过<!--变量名？-->转换成一串数字保存到引用表中的方式，保证了这些值的immutable和opaque。

通常把Styles<!--var styles or StyleSheet.create?-->的定义放在文件的末尾，确保在整个应用周期内<!--appliation?-->只创建这些styles一次，而不是每次渲染时都创建。

如何使用Styles

使用Styles示例代码如下：

<Text style={styles.base} />
<View style={styles.background} />

<View style={[styles.base, styles.background]} />

<View style={[styles.base, this.state.active && styles.active]} />

这里的<Text />结构是JSX的表示方式，我们在实际开发过程中会经常用到这种类似于HTML标记语言的JS语法扩展。

将Styles作为参数

由于Styles定义的是一个对象，我们当然可以将其作为参数进行传递。

var List = React.createClass({
	propTypes: {
		style: View.propTypes.style,
		elementStyle: View.propTypes.style,
	};
	render: function() {
		<View style={this.props.style} >			{elements.map((element) => 
				<View style={[styles.element, this.props.elementStyle]} />
			)}
		<View />
	}
});

// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />

虽然JSX语法长得很像HTML，但是style的赋值仍为一个对象。

Where to go

React Native组件开发入门指南 - Images