ReactNative初学笔记2.1 View组件

本人只粗略了解标签语言，至于html5，js，css啥的完全外行。我认为ReactNative是移动App开发的趋势，作为一个iOS开发工程师，深知原生开发的局限性，从今天起，像个孩子一样学习RN。使用教材《React Native入门与实践》

今天在学习的时候，遇到了一个难题，1 / PixelRatio.get()在iphone 6 plus模拟器下，有问题



理想中分割线是这样的:（切换到6及以下）



网上搜索未得到解决方法，待日后继续研究

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio

} = React;

var app = React.createClass({

render: function() {

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.center,styles.flex,styles.lineCenter]}>
<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.lineCenter]}>
<Text style = {styles.font}>团购</Text>

</View>
<View style = {[styles.center,styles.flex]}>
<Text style = {styles.font}>客栈，公寓</Text>

</View>

</View>
</View>
</View>

);

}

});

var styles = StyleSheet.create({

container: {
marginTop: 25,
marginLeft: 5,
marginRight: 5,
height: 84,
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('demo', () => app);