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

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

要引入RN的基础组件，View、Text，还有关于导航返回的组件react-navigation，这里我为了兼容iphonex引入了Dimensions和Platform两个组件

import React from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';
import { StackNavigator, NavigationActions } from 'react-navigation';

下面我们就开始写最大的容器组件了，这个组件包括头部导航部分

// 兼容ihponex
const X_WIDTH = 375;
const X_HEIGHT = 812;
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
            (SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))
    )
}
// 头部标题部分
function Header({ title, headBg, headColor }) {
    return 
         {
            const { navigate, goBack } = navigation;
            goBack();
        }}
            style={{ width: 44, height: 44, position: 'absolute', top: 0, left: 0 }}>
            
        
        
            {title}
        
    
}
/**
 * page组件开始
 */
export class Page extends React.Component {
    render() {
        let { style, title, children, headBg = '#3285ff', headColor = '#fff', dom, other } = this.props;
        let styles = {
            height: '100%',
            width: '100%'
        }
        return (
            
                {/* 判断：如果没有头部直接显示空 */}
                {title ? 
 : null}
                
                    {children}
                
            
        )
    }
}