如何使用React Native创建底部标签导航

时间:2020-07-25 17:11:53

标签: javascript reactjs react-native react-navigation

我将实现一个react native页脚菜单(底部tam导航器)。但是我在运行它时遇到了一些错误。

这是我的drawer.js文件

import React,{Component} from 'react';
import {View,Text,StyleSheet} from "react-native";
import {createAppContainer}from "react-navigation";
import {createMaterialBootomTabNavigator} from "react-navigation-material-bottom-tabs";
import Homescreen from "./home.js";

class drawer extends React.Component{


    render() {
        return (
            <View style={styles.container}>
                <Text>drawer</Text>
            </View>
        );
    }
}


const styles=StyleSheet.create({

    container:{
        flex:1,
        justifyContent:"center",
        alignItems:"center",
    }
});

const TabNavigator=createMaterialBootomTabNavigator(
    {
    Home:{
        screen:Homescreen,
    }

    },

    {
        initialRouteName:"home",
        activeColor:"#f0edf6",
        inactiveColor:"#3e2465",
        barStyle:{ backgroundColor: '#694fad' },
        
    }


);

export default createAppContainer(TabNavigator);

我已经安装了react-navigator。

通过在我的模拟器上运行它,我收到了此错误。 enter image description here

我该如何解决?

1 个答案:

答案 0 :(得分:0)

将createMaterialBootomTabNavigator更改为createMaterialBottomTabNavigator