React Native 小实例 采用View布局如下视图

React Native 小实例 采用View布局如下视图

实例步骤

1.加载View组件

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import中添加View组件

2.创建组件

class FirstRN extends Component { //继承方式
render() { //渲染
return (
<View style={styles.container}>
</View>
);
}
}

3.添加样式表

const styles = StyleSheet.create({
container: {
flex: 1,
borderWidth:1,
borderColor:'red',
flexDirection:'row',
//backgroundColor: '#0f0',
},
item: {
flex: 1,
height:80,
borderWidth:1,
borderColor:'blue',
},
});

4.注册入口

AppRegistry.registerComponent('FirstRN', () => FirstRN);

5.外层布局

<View style={styles.container}>
</View>

6. flex box水平三栏布局

外联样式: style={styles.container}
内联样式: style={{flex:1,borderWidth:1}}
多个样式: style={[styles.container,{flex:1,borderWidth:1}]}

7.完善效果及整体代码

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} from 'react-native';

class FirstRN extends Component {
render() {
return (
<View style={styles.flex}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item, styles.lineLeftRight]}>
<View style={[styles.flex, styles.center, styles.lineCenter]}>
<Text style={styles.font}>海外酒店</Text>
</View>
<View style={[styles.flex, styles.center]}>
<Text style={styles.font}>特惠酒店</Text>
</View>
</View>
<View style={[styles.item, styles.lineLeftRight]}>
<View style={[styles.flex, styles.center,styles.lineCenter]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.flex, styles.center]}>
<Text style={styles.font}>客栈,公寓</Text>
</View>
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
marginTop: 200,
marginLeft: 5,
marginRight: 5,
height: 85,
flexDirection: 'row',
borderRadius: 5,
padding: 2,
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',
},
});

AppRegistry.registerComponent('FirstRN', () => FirstRN);

最终结果如下