ReactNative初学笔记2.1 View组件

最新推荐文章于 2022-07-06 21:53:30 发布

晓阳依旧

最新推荐文章于 2022-07-06 21:53:30 发布

阅读量249

点赞数

分类专栏： RN 文章标签： ios react

本文链接：https://blog.csdn.net/xiaoyangyijiu/article/details/51149989

版权

RN 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人只粗略了解标签语言，至于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);