内容简介：接上一篇首先改写App这个类注意到第二级的View标签的style属性的大括号里面是一个数组, 这样就可以应用多个样式.
justiyfContent
首先改写App这个类
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<View style={[styles.item, styles.itemOne]}>
<Text style={styles.itemText}>1</Text>
</View>
<View style={[styles.item, styles.itemTwo]}>
<Text style={styles.itemText}>2</Text>
</View>
<View style={[styles.item, styles.itemThree]}>
<Text style={styles.itemText}>3</Text>
</View>
</View>
);
}
}
注意到第二级的View标签的style属性的大括号里面是一个数组, 这样就可以应用多个样式.
然后再去定义这几个样式
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
},
itemOne: {},
itemTwo: {},
itemThree: {},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
看一眼效果
默认这三个View会堆叠到一块儿, 然后靠着屏幕的上面去显示
现在我们修改一下style
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
},
itemOne: {},
itemTwo: {},
itemThree: {},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
justifyContent: 'center',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
注意到我们对最外面的View应用的样式是container, 现在我们修改这个container中的属性, 加入一行 justifyContent: 'center' , justifyContent决定子元素是应该在头部，中部，尾部还是平均分布 , 默认是 flex-start , 就是上面那个样子, 现在我们把它改成center以后再观察一下
可以看到子元素们都居中显示了.
flex-end效果:
space-between效果:
space-around效果:
注意到space-between是将子元素的首尾都靠着父元素的首位, 然后让这几个子元素平均排列, space-around是将父元素的空间平均分配, 然后每个子元素都放在被分配的空间的中间位置.
alignItems
我们再注意到, 这几个子元素默认的宽度就是屏幕的宽度, 这是因为他们的包装容器alignItems属性的值默认是stretch, 现在我们修改一下, 将alignItems的属性改成flex-start
container: {
justifyContent: 'space-around',
alignItems: 'flex-start',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
效果如下
还可已设置成 center 、 flex-end
alignSelf
alignSelf可以控制子元素与包装容器的对齐方式.
我们也可以单独的去控制每个子元素的对齐方式, 比如我们可以找到itemOne、itemTwo、itemThree的样式, 设置如下:
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
},
itemOne: {
alignSelf: 'flex-start',
},
itemTwo: {
alignSelf: 'center',
},
itemThree: {
alignSelf: 'flex-end',
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
justifyContent: 'space-around',
alignItems: 'flex-start',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
效果如图:
flex
现在我们想让每个子元素都占总空间的三分之一, 那就在注释掉其他属性, 然后再item里面设置flex属性为1, 代码如下:
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
flex: 1,
},
itemOne: {
// alignSelf: 'flex-start',
},
itemTwo: {
// alignSelf: 'center',
},
itemThree: {
// alignSelf: 'flex-end',
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
效果如下:
如果想让某个某个项目多占一点地方, 可以去单独设置一下这个项目的flex属性, 比如我们设置项目三的flex属性为2
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
flex: 1,
},
itemOne: {
// alignSelf: 'flex-start',
},
itemTwo: {
// alignSelf: 'center',
},
itemThree: {
// alignSelf: 'flex-end',
flex: 2,
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
效果如下:
flexDirection
现在这几个项目是在同一列里面从上到下显示的, 这是因为他们的包装容器的flexDirection的值默认是column, 也就是所有子元素都在同一列中, 那就是从上到小排列.现在我们把这个属性的值改为row, 让所有子元素都在同一行, 从左到右排列
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
flex: 1,
},
itemOne: {
// alignSelf: 'flex-start',
},
itemTwo: {
// alignSelf: 'center',
},
itemThree: {
// alignSelf: 'flex-end',
flex: 2,
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
flexDirection: 'row',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
效果如下:
技巧
如果你不知道某个属性有哪些值可以设置, 你可以先随便写一个错的值
比如这里我在alignSelf写了一个错的值
let styles = StyleSheet.create({
item: {
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin: 6,
flex: 1,
},
itemOne: {
alignSelf: 'ddd',
},
itemTwo: {
// alignSelf: 'center',
},
itemThree: {
// alignSelf: 'flex-end',
// flex: 2,
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
// flexDirection: 'row',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});
接着刷新reload的时候就会报错, 报错信息里说, alignSelf只能是
auto 、 flex-start 、 flex-end 、 center 、 stretch 、 baseline 中的某一种
以上所述就是小编给大家介绍的《ReactNative学习笔记(二)之flexbox》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Elements of Information Theory
Thomas M. Cover、Joy A. Thomas / Wiley-Blackwell / 2006-7 / GBP 76.50
The latest edition of this classic is updated with new problem sets and material The Second Edition of this fundamental textbook maintains the book's tradition of clear, thought-provoking instr......一起来看看 《Elements of Information Theory》 这本书的介绍吧!
