ReactNative初学笔记2.1 View组件

来源：互联网发布：手机淘宝可以贷款么编辑：程序博客网时间：2024/06/07 08:55

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

今天在学习的时候，遇到了一个难题，1 / PixelRatio.get()在iphone 6 plus模拟器下，有问题
iphone6plus下
理想中分割线是这样的:（切换到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);

0 0