美文网首页
基于RN的自建公用组件-Flex

基于RN的自建公用组件-Flex

作者: 蚊小文 | 来源:发表于2018-04-19 16:51 被阅读0次

    1.首先要搭建React Native的开发环境

    2.要引入RN的基础组件,View,还有关于导航返回的组件react-navigation

    import React from 'react';
    import { View } from 'react-native';
    

    3.下面我们就开始写公用的容器组件了

    export class Flex extends React.Component{
        render(){
            let { style, column, horizontal, vertical, HW, flex1, children, dom, other } = this.props;
            if(!style){
                style={}
            }
            if(!column){
                style.flexDirection = 'row';
            }
            if(horizontal){
                style.justifyContent = 'center';
            }
            if(vertical){
                style.alignItems='center';
            }
            if(HW){
                style.justifyContent = 'center';
                style.alignItems='center';
            }
            if(flex1){
                style.flex=1
            }
            return(
                <View style={style} ref={dom} {...other} >
                    {children}
                </View>
            )
        }
    }
    

    相关文章

      网友评论

          本文标题:基于RN的自建公用组件-Flex

          本文链接:https://www.haomeiwen.com/subject/tnnwkftx.html