React Native 中的样式
在React Native中不需要其他的语言或者语法来定义样式，只需要JavaScript。所有的核心元素都支持一个叫做style的prop。stype的名字和值都效仿与CSS，但是名字以驼峰形式命名。
作为例子，这里使用一个简单地JavaScript对象来定义。你也可以传递一个样式类型的数组数组作为样式的值，数组中最后一个样式具有最高的优先级，这种机制使得样式可以被继承。
为了使得元素定义更清晰，StyleSheet.create可以在一个地方定义多个样式，如下：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
更多字体的样式可以查阅 Text component reference
元素尺寸
Fixed Dimensions
最简单的设置元素尺寸的方法就是在style中加入width和height。在React Native中，所有的尺寸都是没有单位的，默认代表像素。例子：
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
Fixed Dimension这种设置单位的方式通常用标记尺寸不变的元素，无论屏幕的单位。
Flex Dimension
Flex方式用于元素尺寸需要根据容器的大小而变化的情况。通常，flex:1 用来表示充可用的满容器元素，与容器中其他的控件共享空间。flex的值越大，元素占用的控件相比其他元素也越大。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
布局
一个控件（元素 component）可以通过flexbox算法来规定它的子空间的布局。Flexbox被设计用来提供一个不同尺寸上的固定的布局。你会经常用三个东西结合在一起来进行布局，flexDirection，alignItems和justifyContent。
Flex Direction
在某个元素的Style中加上 flexDirection来确定有限轴。元素的子元素是水平布（row）局还是垂直布局（column）？默认是垂直布局column。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
Justify Content
给元素的Style设置 justifyConnect决定了子元素在布局轴上的排列方式。例子：
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
Align Items
与Justify Content县不同，他决定在非主轴上的的排列方式。例子：
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AlignItemsBasics extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
结尾
上述，是布局的基础，想要更深入的了解布局，可以查阅文档
想要完成一个比较完整的App我们接下来还需要了解怎样处理用户的输入。
