Javascript TypeError:undefined不是对象（计算此.getActiveTab（）.barColor）

我是新手，无法解决以下问题

TypeError:undefined不是对象（正在评估） 此参数为.getActiveTab（）.barColor）

上述错误发生在以下组件中

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import home from "../../../assets/home.png";
import form from "../../../assets/home.png";
import contact from "../../../assets/home.png";
import BottomNavigation, {
  FullTab, Tab
} from 'react-native-material-bottom-navigation';

import Icon from 'react-native-vector-icons/MaterialIcons';
export default class BottomView extends Component {
  constructor(props){
    super(props);
    this.state = { activeTab: 0 };
  }

  handleTabChange = (newTabIndex, oldTabIndex) => {
        this.setState({ activeTab: newTabIndex });
        if (newTabIndex === oldTabIndex) {
          null;
        }
        if (this.state.activeTab === 0) {
        } else if (this.state.activeTab === 1) {
        } else {
        }
    }

  render(){
    return(
      <View style={styles.container}>   
                <BottomNavigation
                    activeTab={this.state.activeTab}
                    labelColor="#5c007a"
                    rippleColor="white"
                    style={{
                      height: 56,
                      elevation: 8,
                      position: 'absolute',
                      left: 0,
                      bottom: 0,
                      right: 0
                    }}
                    onTabChange={this.handleTabChange}
                >
                    <Tab 
                      barBackgroundColor="#fff"
                      label="Home"
                      icon={<Icon size={24} color="#5c007a" name="home" />}
                    />
                    <Tab 
                      barBackgroundColor="#fff"
                      label="Categories"
                      icon={<Icon size={24} color="#5c007a" name="list" />}
                    />
                    <Tab
                      barBackgroundColor="#fff"
                      label="Profile"
                      icon={<Icon size={24} color="#5c007a" name="person" />}
                    />
                </BottomNavigation>
            </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
从“../../../assets/home.png”导入主页；
从“../../../assets/home.png”导入表单；
从“../../../assets/home.png”导入联系人；
导入导航{
全部选项卡，选项卡
}从“反应原生材料底部导航”；
从“反应本机矢量图标/唯物主义者”导入图标；
导出默认类BottomView扩展组件{
建造师（道具）{
超级（道具）；
this.state={activeTab:0}；
}
handleTabChange=（newTabIndex，oldTabIndex）=>{
this.setState（{activeTab:newTabIndex}）；
if（newTabIndex==oldtab索引）{
无效的
}
if（this.state.activeTab==0）{
}else if（this.state.activeTab==1）{
}否则{
}
}
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
}
});

有两个潜在问题

1） 看起来您正试图从“react native material bottom navigation”导入选项卡组件，但从他们的API文档显示的内容来看，该软件包提供的组件如下：

• 徽章
• 海底航行
• 全表
• 伊康塔布
• 换档杆

我建议深入研究他们的文档，了解如何使用他们提供的组件

2） 您正在从“react native vector icons/MaterialIcons”导入图标

我查看了他们文档中的那部分，您的实现方式与他们建议您的方式不匹配。要解决该特定问题，请将所有出现的

图标

替换为

MaterialIcons

---

查看react native material底部导航的文档；它似乎与您使用的方式完全不同。选项卡对象位于数组中，然后传递到底部导航。在此期间，我将尝试在我这边复制你的错误，但我相信，如果这些建议的解决方案不起作用，我至少会让你走上正确的方向。