一、声明和使用样式
1.React Native里面的样式和使用如下面所示,StyleSheet.create这个构造函数不是必须的;
index.android.js文件
import React, {
… …
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View>
//所有核心组件都可以接受style属性
<Text style={styles.base}>Declare Style</Text>
//接受数组形式的多个style
<Text style={[styles.base, styles.background]}>Declare Style</Text>
//根据某些条件选择性的添加样式,否定型取值如false,undefined和null则会被忽略
<View style={[styles.base, true && styles.active]}/>
//可以在render方法中创建样式,多个值冲突的时候,右边的元素优先级最高
<View style={[styles.background, styles.base, { width:80, height:80}]}/>
</View>
);
}
}
//声明样式
var styles = StyleSheet.create({
base: {
width: 100,
height: 38,
},
background: {
backgroundColor: '#cccccc',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
二、Flexbox(弹性盒子模型)
1.在布局上,React Native还实现了弹性盒子模型Flexbox。flexbox布局由伸缩容器和伸缩项目组成,任何一个元素都可以指定为flexbox布局;
其中设为display:flex或display:inline-flex的元素称为伸缩容器;
伸缩容器的子元素称为伸缩项目;
2.和传统的布局不一样,它按照伸缩流的方向布局;
3.默认情况下,伸缩容器由两根轴组成,即主轴(main axis)和交叉轴(cross axis);
其中主轴的开始位置叫main start,结束位置叫main end;
交叉轴的开始位置叫cross start,结束位置叫cross end;
伸缩项目在主轴上占据的空间叫main size,在交叉轴上占据的空间叫cross size;
根据设置的情况,主轴可以是水平轴,也可以是垂直轴;
不管那个轴作为主轴,默认情况下伸缩项目总是沿着主轴,从主轴开始位置到主轴结束位置进行排列;
4.伸缩容器属性
下面我们一实际的Demo来演示下相关属性的作用;
index.android.js文件:
import React, {
… …
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.flexcontain}>
<View style={styles.flexitem}>
<Text>1</Text>
</View>
<View style={styles.flexitem}>
<Text>2</Text>
</View>
<View style={styles.flexitem}>
<Text>3</Text>
</View>
<View style={styles.flexitem}>
<Text>4</Text>
</View>
<View style={[styles.flexitem,styles.item5]}>
<Text>5</Text>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
flexcontain: {
width:300,
height:300,
borderWidth:1,
borderColor:'blue',
flexDirection:'row',
top:100,
left:100,
},
flexitem: {
width:50,
height:50,
borderWidth:1,
borderColor:'white',
backgroundColor:'gray',
justifyContent:'center',
alignItems:'center',
},
item5: {
alignSelf:'stretch',
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
flexDirection:指定主轴的方向;
row:水平方向;
column:竖直方向;
flexWrap:主轴线方向空间不足的情况下,是否换行以及应该如何换行;
wrap:空间不足的情况下允许换行,若主轴方向为水平方向,则从上到下;若主轴方向是为竖直方向,从左到右;
nowrap:即使空间不足,伸缩容器也不允许换行;
justifyContent:伸缩项目沿主轴方向的对其方式;
flex-start:伸缩项目沿主轴线的对其方式;
flex-end:伸缩项目沿着主轴线的结束位置靠齐;
center:伸缩项目向主轴中间位置靠齐;
space-between:伸缩项目会平均地分配在主轴线里,第一伸缩项目在主轴线的开始位置,最后一个项目在主轴线的终点位置;
space-around:伸缩项目会平均分布在主轴线里,两端保持一半的空间;
alignItems:伸缩项目在伸缩容器的交叉轴上的对其方式;
flex-start:伸缩项目向交叉轴的起始的位置对齐;
flex-end:伸缩项目向交叉轴的结束位置对齐;
center:伸缩项目向交叉轴的中间位置对齐;
alignSelf:设置单独伸缩项目在交叉轴上的对齐方式;
auto:伸缩项目按照自身设置的宽高显示;
flex-start:伸缩项目向交叉轴开始位置靠齐;
flex-end:伸缩项目向交叉轴的结束位置靠齐;
center:伸缩项目向交叉轴的中心位置靠齐;
borderBottomWidth/borderRightWidth/borderTopWidth/borderTopWidth:底部边框的宽度;
margin/marginTop/marginBottom/marginLeft/marginRight:外边距;
padding/paddingTop/paddingBottom/paddingLeft/paddingRight:内边距;
left/top/right/bottom:左上角坐标;
width/height:宽高;
三、将样式作为参数传递
1.为了能够在调用组件的地方对其子组件样式进行自定义,可以将样式作为参数进行传递;
2.使用View.propTypes.style和Text.propTypes.style来确保传递的参数确实是style类型的;
index.android.js文件:
提示1:如果RoadJS的时候,页面报错如下:
Warning: Each child in an array or iterator should have a
unique "key" prop. Check the render method of List.
处理1:在map函数中的<View>加上key={element}属性;
2.使用View.propTypes.style和Text.propTypes.style来确保传递的参数确实是style类型的;
index.android.js文件:
import React, {
AppRegistry,
… …
} from 'react-native';
//创建List组件
var List = React.createClass({
//声明传递参数和参数类型
propTypes: {
style: View.propTypes.style,
elementStyle: View.propTypes.style,
},
render() {
var elements = ['element1','element2','element3'];
return (
//使用参数传递过来的样式设置子组件
<View style={this.props.style}>
//直接调用和使用参数传递的样式设置子组件
{elements.map((element) =><View key={element} style={[styles.element, this.props.elementStyle]} />)}
</View>
);
}
});
class AwesomeProject extends Component {
render() {
return (
<View>
<List style={styles.list} elementStyle={styles.listElement} />
</View>
);
}
}
var styles = StyleSheet.create({
//传递给子组件样式list
list: {
width:300,
height:300,
borderWidth:1,
borderColor:'blue',
},
//传递给子组件样式listElement
listElement: {
width:50,
height:50,
backgroundColor:'gray',
},
//直接调用样式element
element: {
borderWidth:1,
borderColor:'yellow',
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject
提示1:如果RoadJS的时候,页面报错如下:
Warning: Each child in an array or iterator should have a
unique "key" prop. Check the render method of List.
处理1:在map函数中的<View>加上key={element}属性;