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

2018-04-19  本文已影响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>
        )
    }
}
上一篇下一篇

猜你喜欢

热点阅读