javascript - 每个模块只有一个默认导出允许使用 Navbar 在 React Native 上出错

Question

我正在尝试使用带有图标的 React Native 制作底部导航栏，但出现此错误每个模块只允许一个默认导出。
问题来自最后一行 export default createAppContainer(TabNavigator);
我尝试以这种方式导出默认 createAppContainer(TabNavigator)(Home) 并将导出默认值删除到我的 Home.js 组件，但它也不起作用。
有谁知道我做错了什么。欢迎所有帮助!

import React, {Component} from 'react'
import {Text, View, StyleSheet } from 'react-native';
import {createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {Icon} from 'react-native-elements';

import Profile from "./Profile";
import Appointment from "./Appointment";



const styles = StyleSheet.create({

   homeText: {
      fontSize: 40,
      
   },

   homeCont: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
   }

})

export default class Home extends Component {

   render() {

      return(

         <View style={styles.homeCont}>
            <Text style={styles.homeText}>HOME SCREEN</Text>
            
         </View>
    
     
      )

   }

   

}

const TabNavigator= createMaterialBottomTabNavigator({

   Home: {screen:Home,
          navigationOptions: {
             tabBarLabel: 'Home',
             activeColor: '#ff0000',
             inactiveColor: '#000000',
             barStyle: {backgroundColor: '#67baf6'},
             tabBarIcon:() => (
                <View>
                   <Icon name={'home'} size={25} style={{color:'#ff000'}} />
                </View>
             )
          }
   },
   Appointment: {screen:Appointment,
      navigationOptions: {
         tabBarLabel: 'Appointment',
         activeColor: '#ff0000',
         inactiveColor: '#000000',
         barStyle: {backgroundColor: '#67baf6'},
         tabBarIcon:() => (
            <View>
               <Icon name={'calendar'} size={25} style={{color:'#ff000'}} />
            </View>
         )
      }
},

Profile: {screen:Profile,
   navigationOptions: {
      tabBarLabel: 'Profile',
      activeColor: '#ff0000',
      inactiveColor: '#000000',
      barStyle: {backgroundColor: '#67baf6'},
      tabBarIcon:() => (
         <View>
            <Icon name={'person'} size={25} style={{color:'#ff000'}} />
         </View>
      )
   }
}


});

export default createAppContainer(TabNavigator);

Answer 1

问题是您正在导出 Home 组件`

export default class Home extends Component {

   render() {

      return(

         <View style={styles.homeCont}>
            <Text style={styles.homeText}>HOME SCREEN</Text>
            
         </View>
    
     
      )

   }

   

}

相反，做

function Home () {
      return(
         <View style={styles.homeCont}>
            <Text style={styles.homeText}>HOME SCREEN</Text>
         </View>
     )

}