本篇是在学习《React Native入门与实战》这本书时做的笔记,代码基于React Native 0.44实现的,算是对该书中代码的小小更新。
View是一个容器组件,是UI组件中最基本的组件,类似于HTML中的div。
书中的九宫格是一个水平3栏,第二栏和第三栏又分上下两栏。效果如下图:
1.外层布局
不用想,我们首先创建一个根布局,并在里面添加水平3栏:
export default class demo01 extends Component {
render() {
return(
<View>
<View></View>
<View></View>
<View></View>
</View>
);
}
}
2.flexbox水平三栏布局
我们使用flexbox实现水平布局并且平分屏幕宽度。这时候就需要借助于样式表了。
styles = StyleSheet.create({
container: {
flex:1,
height: 84,
borderRadius: 5,
flexDirection: 'row'
},
item: {
flex:1,
height: 80
}
});
这里有两个样式比较重要,即:flex和flexDirection,flexbox默认的是纵向布局,即flexDirection默认为column。为了实现3个View水平布局,我们需要将为flexDirection的值设置为row,样式flex表示权重,即:当flexDirection值为row时,将平分宽度到每一个子View上。下面是为布局添加样式:
export default class demo01 extends Component {
render() {
return(
<View style={styles.container}>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
</View>
);
}
}
3.上下两栏布局
有了上面的水平布局,纵向布局当然也难不倒你,在实现上下两栏布局时,我们需要引入新的组件-Text,用于显示文字。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio
} from 'react-native';
具体代码如下:
export default class demo01 extends Component {
render() {
return(
<View style={styles1.flex}>
<View style={styles1.container}>
<View style={[styles1.item, styles1.center]}>
<Text>酒店</Text>
</View>
<View style={[styles1.item, styles1.lineLeftRight]}>
<View style={[styles1.center, styles1.flex, styles1.lineCenter]}>
<Text>海外酒店</Text>
</View>
<View style={[styles1.center, styles1.flex]}>
<Text>特惠酒店</Text>
</View>
</View>
<View style={styles1.item}>
<View style={[styles1.center, styles1.flex, styles1.lineCenter]}>
<Text style={styles1.font}>团购</Text>
</View>
<View style={[styles1.center, styles1.flex]}>
<Text style={styles1.font}>客栈.公寓</Text>
</View>
</View>
</View>
</View>
);
}
}
styles1 = StyleSheet.create({
container: {
marginTop: 25,
marginLeft: 5,
marginRight: 5,
height: 84,
borderRadius: 5,
padding: 2,
flexDirection: 'row',
backgroundColor: '#FF0067'
},
item: {
flex:1,
height: 80,
},
center: {
justifyContent: 'center',
alignItems: 'center'
},
flex: {
flex:1
},
font: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold'
},
lineLeftRight: {
borderLeftWidth: 1/PixelRatio.get(),
borderRightWidth: 1/PixelRatio.get(),
borderColor: '#fff'
},
lineCenter: {
borderBottomWidth: 1/PixelRatio.get(),
borderColor: '#fff'
}
});