引入common组件

image

配置后npm i安装相应的依赖

配置路由

common组件中将react-navigation封装成Router组件

1.配置入口文件，此处取名launch

import React from 'react';
import {
    View,
    Button,
    Text,
    TouchableHighlight,
    StatusBar,
    StyleSheet,
    Platform,
} from 'react-native';
//从common中导入Router组件
import { Router, Request, DataType, Icon, Skin } from 'common';
import { observer } from 'mobx-react/native';
import Home from './pages/Home/ceshi1'
import Cs from './pages/Home/ceshi2'

let renderContainer = ({ children, style }) => {
    return (
        <View>
            <View style={{ height: 55 }} />
            {children}
        </View>
    );
};
let renderTabContainer = ({ children, key }) => {
    return (
        <View style={{ flex: 1 }} key={key}>
            <View style={{ height: 20, width: 0 }} />
            <View style={styles.tabContent}>{children}</View>
        </View>
    );
};
let openCamera = () => {
    // Router.push("Camera");
};
let renderCameraTabContainer = ({ children, key }) => {
    return (
        <View style={{ width: 100 }} key={key}>
            <View style={{ height: 20, width: 0 }} />
            <View style={styles.tabContent}>{children}</View>
            <View style={styles.cameraTabBox} />
            <View style={styles.cameraTabMask} />
            <TouchableHighlight
                style={styles.cameraTab}
                underlayColor={Skin.colors[0].toDark(0.3)}
                onPress={openCamera}
            >
                <Icon name="camera" style={{ color: '#FFF', fontSize: 30 }} />
            </TouchableHighlight>
        </View>
    );
};

//router路由名字设置
const routerData = {
    Login: {
        component: Home,
        // initial: true,
    },
    HomeTab: {
        // drawer: UserCenter,
        lazy: true,
        tabbarStyle: {
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: null,
            borderTopWidth: 0,
            paddingHorizontal: 0,
            paddingVertical: 0,
        },
        renderContainer: renderContainer,
        children: {
            Home: {
                component: Home,
                title: '医生信息',
                icon: 'roadblock',
                renderTabContainer: renderTabContainer,
            },
            Map: {
                component: ()=>null,
                title: '就诊记录',
                icon: 'form',
                renderTabContainer: renderTabContainer,
            },
            DrugStore: {
                component: ()=>null,
                title: '账号管理',
                icon: 'message',
                renderTabContainer: renderTabContainer,
            },
        },
        initial: true,
    },
    Cs,
};

// @observer
export default class Launch extends React.Component {
    render() {
        let translucent = true;
        if (Platform.OS == 'android' && Platform.Version < 21) {
            translucent = false;
        }
        return [
            !global.__WEB__ && (
                <StatusBar
                    key={'appStatusBar'}
                    style={{ flex: 1 }}
                    translucent={translucent}
                    backgroundColor="rgba(0,0,0,0.1)"
                    barStyle={'light-content'}
                    //barStyle={"dark-content"}
                />
            ),
          //生成Router路由，使用action的push，replace等进行路由跳转
            <Router key="appLaunch" data={routerData} />,
        ];
    }
}

const styles = StyleSheet.create({
    tabContent: {
        backgroundColor: '#FFF',
        borderTopWidth: 0.5,
        borderColor: '#CCC',
    },
    cameraTab: {
        position: 'absolute',
        bottom: 6,
        width: 60,
        height: 60,
        borderRadius: 30,
        backgroundColor: Skin.colors[0],
        left: '50%',
        marginLeft: -30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    cameraTabBox: {
        position: 'absolute',
        bottom: 1,
        width: 70,
        height: 70,
        borderRadius: 35,
        backgroundColor: '#FFF',
        borderWidth: 1,
        borderColor: '#CCC',
        left: '50%',
        marginLeft: -35,
    },
    cameraTabMask: {
        position: 'absolute',
        bottom: 0,
        width: 70,
        height: 55,
        backgroundColor: '#FFF',
        left: '50%',
        marginLeft: -35,
    },
});

2.如果报错

111.png

删除module重新安装依赖