最近换了工作，本人是原生Android原生开发。新公司是用RN开发，以前没有接触过，这段时间一直在看这方面的内容。网上有很多教程了，但为了能够在新项目开始之前快速熟悉RN , 直接从小案例开始，顺便通过博客来记录自己的学习过程。
实现效果如下图：
RNView.png
布局非常简单：水平3栏，第二栏和第三栏通过分割线又分为上下2栏。
接下来我们一步步快速的实现
首先创建一个RN项目，开始编辑index.android.js文件
render() {
return (
//根View ，有且只能有一个根View
<View >
//第一栏
<View>
<Text>洒店</Text>
</View>
//第二栏
<View>
<View>
<Text>海外洒店</Text>
</View>
<View>
<Text>特惠洒店</Text>
</View>
</View>
//第三栏
<View>
<View>
<Text>团购</Text>
</View>
<View>
<Text>客栈.公寓</Text>
</View>
</View>
</View>
);
}
运行效果图:
effect1.png
上面的View是一个容器组件，提供了视图布局的功能。他相当于Html中的<div>标签，相当于Android当中的ViewGroup，可以放一些子元素。接下来就是设置一些样式了
-
根View的一些样式
const styles = StyleSheet.create({ container: { // 整个View离左边的间距 marginLeft: 5, marginRight: 5, marginTop: 25, // 整个View的高度 height: 90, //子元素在父容器中排列方向：水平方向(从左向右)；coloum为垂直方向（从上到下） flexDirection: 'row', // 整个View的边框四个角的弧度 borderRadius: 8, backgroundColor: '#ff0060', }, }); //样式使用 <View style={styles.container}> <View> <Text>洒店</Text> </View> ...
effect2.png
上面的flexDirection，除了上面说的，还有两个属性：row-reverse（从右向左）, coloum-reverse(从下到上)，后面会演示期效果。在styles中继续添加样式
item: {
flex: 1,
height: 90
},
<View style={styles.item}>
<Text>洒店</Text>
...
<View style={styles.item}>
<View>
<Text>海外洒店</Text>
...
<View style={styles.item}>
<View>
<Text>团购</Text>
...
effect3.png
flex可以理解为权重，也就是一个子View在父View占的比例大小。如上面的水平三栏，也就是每一栏都占1/3。相当于Android当中的weight
center: {
justifyContent: 'center', //重直居中
alignItems: 'center' //水平居中
},
flex: {
flex: 1
},
font: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold'
},
<View style={styles.container}>
<View style={[styles.item, styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item]}>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>海外酒店</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>特惠酒店</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>客栈.公寓</Text>
</View>
</View>
</View>
effect4.png
最后添加分割线。注意需要在import中添加PixelRatio
dividerLeftRight: {
//PixelRatio的get方法用于获取高清设备的像素比。使用1/PixelRatio.get()就可以获得最小线宽
borderLeftWidth: 1 / PixelRatio.get(),
borderRightWidth: 1 / PixelRatio.get(),
borderColor: '#fff'
},
dividerCenter: {
borderBottomWidth: 1 / PixelRatio.get(),
borderColor: '#fff'
}
<View style={styles.container}>
<View style={[styles.item, styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item, styles.dividerLeftRight]}>
<View style={[styles.center, styles.flex, styles.dividerCenter]}>
<Text style={styles.font}>海外酒店</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>特惠酒店</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center, styles.flex, styles.dividerCenter]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={styles.font}>客栈.公寓</Text>
</View>
</View>
</View>
effect5.png
最后来一个水平反向的。将container中的flexDirection: 'row-reverse',就可以了
effect6.png
