创建文档时间：2016.3.21-11:18
作者：三月懒驴
使用平台：Mac
布局
在上一个文章的项目中，我们新建一个lesson文件夹，这里面放的是学习用的lesson组件。创建一个lesson_1.js，来感受一下Flex布局的精髓
//in lesson_1.js —— 1.左右平分一屏，2.上下平分一屏
//in render result
<View style={Styles.body}>
<View style={Styles.block1}></View>
<View style={Styles.block2}></View>
</View>
//in Styles
const Styles = {
body:{
flex:1,
flexDirection:'row'//改成：'column'就上下平分
},
block1:{
flex:1,//修改一下这儿为2就变成占了3/2
backgroundColor:'#ccc',
},
block2:{
flex:1,
backgroundColor:'#000',
},
}
进阶作业：把上面的二等分写成四等分屏幕 && 九宫格布局
//居中的三个情况
//in render result
<View style={Styles.body}>
<Text style={Styles.Title}>水平居中</Text>
<View style={Styles.block1}><View style={Styles.element}></View></View>
<Text style={Styles.Title}>垂直居中</Text>
<View style={Styles.block2}><View style={Styles.element}></View></View>
<Text style={Styles.Title}>垂直水平居中</Text>
<View style={Styles.block3}><View style={Styles.element}></View></View>
</View>
//in styles
const Styles = {
body:{
paddingTop:20,
flexDirection:'column',
},
Title:{
fontSize:10,
textAlign:'center',
margin:5,
},
block1:{
flex:1,
height:50,
marginBottom:20,
backgroundColor:'#ccc',
alignItems:'center',//这里有几个值：'flex-start', 'flex-end', 'center', 'stretch'
//flexDirection:'row',//试试改成这个看看还是不是水平居中
},
element:{
width:20,
height:20,
borderRadius:10,
backgroundColor:'#fcfcfc'
},
block2:{
flex:1,
height:50,
marginBottom:20,
backgroundColor:'#ccc',
justifyContent:'center'//'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
//flexDirection:'row',//试试改成这个看看还是不是垂直居中
},
block3:{
flex:1,
height:50,
marginBottom:20,
backgroundColor:'#ccc',
justifyContent:'center',
alignItems:'center',
},
}
屏幕的宽高
上面例子中，写的布局都不用单位的，其实RN里面单位使用是dp,有兴趣的可以用Dimensions.get('window')来获取屏幕的宽高看看。
'use strick'
import React from 'react-native'
let {View,Text,Dimensions,Component,StyleSheet} = React
class Lesson1_2 extends Component{
render(){
return(
<View style={Styles.body}>
<Text>宽度：{Dimensions.get('window').width}</Text>
<Text>高度：{Dimensions.get('window').height}</Text>
</View>
)
}
}
const Styles = {
body:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
}
export default Lesson1_2
图片的引入
let imageURL = require('../image/test.png')
class Lesson1_3 extends Component{
render(){
return(
//引入图片
<View style={Styles.ImageBlock}>
<Image source={imageURL} />
</View>
);
};
}
const Styles = {
ImageBlock:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
}
export default Lesson1_2
关于图片尺寸这里面有一些值得前端工程师去理解的。在以前网页的时候我们要做屏幕上显示100＊100的图片。那么按照现在最旧的4S来说，我们是要一个200＊200的图片才能保证它的清晰度。而RN和IOS开发一样，提供了@2x 和 @3x的这种机制。因此，我们可以把不同尺寸的图片加一个后缀去让程序自动识别就好了。而由于程序会自动识别判断宽高，不应该写死在样式里面
登陆界面的实现
在之前的文章我说过基础类的控件也就那么几个：View，Text，Image，TextInput，TouchableHightLight。这是必须认识的，因为基本的APP里面都带有他们。而View，Text，Image我们都在上面学过了，那么剩下的TouchableHightLight / TextInput不就刚好可以拿来做一个登陆界面吗？
'use strict'
import React from 'react-native';
let {Component,StyleSheet,View,Text,Image,TextInput,TouchableHighlight} = React;
class LoginBlock extends Component{
_onPressButton(){}
render(){
return(
<View style={Styles.main}>
<View style={Styles.Block}>
<View style={Styles.TitleBlock}>
<Text style={Styles.TitleText}>登陆</Text>
</View>
<View style={Styles.ContentBlock}>
<View style={Styles.Login}>
<View style={Styles.InputBlock}>
<Text style={Styles.InputTitle}>用户名</Text>
<TextInput style={Styles.InputText} />
</View>
<View style={Styles.InputBlock}>
<Text style={Styles.InputTitle}>密码</Text>
<TextInput style={Styles.InputText} secureTextEntry={true} />
</View>
<TouchableHighlight onPress={this._onPressButton} activeOpacity={0.8} style={Styles.touchCSS}>
<View style={Styles.btnLogin}>
<Text style={Styles.btnLoginText}>登陆</Text>
</View>
</TouchableHighlight>
</View>
</View>
</View>
</View>
)
}
}
const Styles = {
main:{
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
backgroundColor:'#fcfcfc',
},
Block:{
flex:1,
borderColor:'#d6d7da',
borderWidth:0.5,
borderRadius:3,
backgroundColor:'#ffffff',
margin:5,
marginVertical:5,
overflow:'hidden',
},
TitleBlock:{
borderBottomWidth:0.5,
borderBottomColor:'#d6d7da',
borderTopLeftRadius:3,
borderTopRightRadius:3,
backgroundColor:'#f6f7f8',
paddingHorizontal:10,
paddingVertical:5,
},
TitleText:{
fontSize:14,
fontWeight:'500',
},
ContentBlock:{
margin:10,
flex:1,
},
Login:{
flex:1,
},
InputBlock:{
marginBottom:5,
marginTop:5,
},
InputTitle:{
fontSize:12,
marginBottom:5,
color:'#545454',
alignItems:'center',
},
InputText:{
height:28,
borderColor:'#f6f7f8',
padding:5,
borderWidth:1,
fontSize:12,
},
//这里面需要主要的是，按钮要做成圆角的话，应该在touchableHeighlight里面设置圆角
touchCSS:{
marginTop:10,
borderRadius:5,
},
btnLogin:{
flex:1,
alignItems:'center',
justifyContent:'center',
height:24,
borderRadius:5,
backgroundColor:'#04BE02',
},
btnLoginText:{
fontSize:12
},
}
export default LoginBlock
这里面主要都是用Flex布局去做的，很多时候从前端转用Flex的时候会觉得很不适应。默认的View在Flex什么时候是100%父节点宽度，什么时候是100%父节点高度，这个和父节点的设置item排序有关。这个额外拿出一个文章来说比较好。完整的一个不漂亮的登陆界面就这样做好了。而基础组件的讲解也差不多。剩下这些组件常用的属性，应该去看看官方文档的API。
放一张效果图片
屏幕快照 2016-03-21 下午5.01.24.png
