TypeError：未定义不是对象（评估this.getActiveTab（）。barColor）

Question

我是本机反应的新手，但无法解决以下问题。

TypeError：未定义不是对象（评估this.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',
  }
});

Answer 1

两个潜在的问题是..

1）似乎您正在尝试从'react-native-material-bottom-navigation'导入Tab组件，但是从其API文档显示的内容来看，此软件包提供的组件看起来像：

• 徽章
• BottomNavigation
• FullTab
• IconTab
• ShiftingTab

https://github.com/timomeh/react-native-material-bottom-navigation/tree/master/docs/api

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

2）您要从“ react-native-vector-icons / MaterialIcons”导入图标。

我去了他们文档的那一部分，您实现的方式与他们建议您执行的方式不匹配。 要解决该特定问题，请用MaterialIcons替换所有出现的Icon

https://github.com/oblador/react-native-vector-icons/blob/master/MaterialIcons.js