转载请注明出处:王亟亟的大牛之路
强行安利,你值得拥有:https://github.com/ddwhan0123/Useful-Open-Source-Android
最近都在张罗新工作的事,整个周末也没怎么学习,感觉我已经是个咸鱼了,早上忙着去体检啥的,下午就补一篇出来吧,为了比较合理的体验,学习的教程走的是http://facebook.github.io/react-native/docs官方的途径,OK,废话不多 GOGOGO
上一篇,我们把环境搭建了下也跑了个事例Demo,那我们来看看那个页面是从何而起
文本编辑器打开以下目录找到
index.ios.js
这就是我们主页面的内容了,我们把它改成Hello World看看
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class WjjPro extends Component {
render(){
return(
<Text>Hi Wjj!</Text>
);
}
}
AppRegistry.registerComponent('WjjPro', () => WjjPro);
我们的Hello World就呈现在这里了,但是因为没有 CSS等内容他在默认的左上角。
那我们给他写一个CSS(之前做过 后台Web,但是JS CSS 什么的几乎是小白,和大家一起进步吧,会的老司机 带我!!!)
const styles=StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});
效果如下:
使用 alignContent 属性对齐交叉轴上的各项(垂直)
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
参考地址:http://webkkl.com/obj-style/justifycontent.php
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
这两个定义了我们的控件在整个View的中间
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
baseline 项目位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
参考地址:http://www.runoob.com/cssref/css3-pr-align-items.html
flex类似于安卓的 weight “权重“的概念我们来试验下。
我们在父控件View里再添加一个Text控件,如下
class WjjPro extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.style2}>Hi Wjj!</Text>
<Text style={styles.style3}>Hello Wjj!</Text>
</View>
);
}
}
他们3个视图都有各自的style,我们再来看下他们的css
const styles=StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},style2:{
backgroundColor: '#EEFCAF',
flex: 2,
},style3:{
backgroundColor: '#F5FCFF',
flex: 3,
}
});
很明显 Hello Wjj比 Hi Wjj更长,但是Hi Wjj被挡了,我们把他们整个控件向下挪一点,像这样
只要在 那2个控件加margin: 20,
就行了
接着再来说下 flexDirection
flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)。
加以操作,我们可以实现多”ViewGroup”的行为,像这样
代码修改如下
class WjjPro extends Component {
render(){
return(
<View style={styles.container}>
<View style={styles.style2}>
<Text>Hi Wjj1! </Text>
<Text>Hi Wjj2! </Text>
</View>
<View style={[styles.style3,{flexDirection: 'column'}]}>
<Text style={styles.style3}>Hello Wjj1!</Text>
<Text style={styles.style3}>Hello Wjj2!</Text>
</View>
</View>
);
}
}
const styles=StyleSheet.create({
container:{
flex: 1,
},style2:{
justifyContent: 'center',
alignItems: 'center',
margin: 20,
flexDirection: 'row',
backgroundColor: '#EEFCAF',
flex: 2,
},style3:{
margin: 20,
backgroundColor: '#F5FCFF',
flex: 5,
}
});
我们最外层还是 1个缩放比,内部是 2:5
然后 style2是横向,style3为纵向
相关资源:http://facebook.github.io/react-native/docs/tutorial.html
项目地址:https://github.com/ddwhan0123/ReactNativeDemo
源码地址:https://github.com/ddwhan0123/ReactNativeDemo/archive/master.zip