Javascript Firebase和stack nav都不能同时在app.js中导出

我的app.js文件中有一个堆栈导航器和一些firebase函数。实现堆栈后，我无法使用listScreen组件中的“注销”按钮，因为我发现我无法在app.js中导出多个。例如，如果我删除app.js的一个导出，堆栈将工作，反之亦然

App.js问题

//export navigation, container to wrap root navigator 
export default createAppContainer(Switcher);

//PROBLEM cant have multiple exports, ether the Switcher or App class can export Individually 

//class for app
 export default class App extends Component {

下面是app.js中的所有代码

//Blue List is has been created by Ameer Yasin and Nick

import React, { Component } from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
//firebase 
import firebase from './servers/firebase.js';
//navigation 
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';

//components and sub component 
import Login from './components/LoginPage.js';
import { SpinLoad } from './components/common/index.js';
import ListScreen from './components/ListScreen';
import AboutScreen from './components/AboutScreen';

// switch stack navigator 
const Switcher = createStackNavigator(
  {
    //from listScreen to about screen 
    TaskPg: ListScreen,
    AboutPg: AboutScreen
  },
  {
    //the route of nav
    initialRouteName: "TaskPg",
    //header title 
    defaultNavigationOptions: {
      title: 'BlueList'
    }
  }
)
//export navigation, container to wrap root navigator 
export default createAppContainer(Switcher);

//PROBLEM cant have multiple exports, ether the Switcher or App class can export Individually 

//class for app
 export default class App extends Component {
  //are u logged in set state to null 
  state = { loggedIn: null };

  componentWillMount() {

    //when logged in call this function
    firebase.auth().onAuthStateChanged((user) => {
      //logged in  
      if (user) {
        this.setState({ loggedIn: true });
      } //logged out 
      else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderContent() {
    //render content depending on auth status 
    switch (this.state.loggedIn) {
      //goto list screen when logged in 
      case true: return (
        <ListScreen />
      )

      //if not logged in goto log in page 
      case false: return <Login />;

      //show loading icon by default 
      default: return <SpinLoad size='large' />
    }
  }

  //render content on screen 
  render() {
    return (
      //SafeAreaView container for content 
      <SafeAreaView style={styles.container}>
        {this.renderContent()}

      </SafeAreaView>
    );
  }
};

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

//蓝名单是由Ameer Yasin和Nick创建的
从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图、安全区域视图}；
//火基
从“/servers/firebase.js”导入firebase；
//航行
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation”导入{createAppContainer}；
//组件和子组件
从“/components/LoginPage.js”导入登录名；
从“./components/common/index.js”导入{SpinLoad}；
从“./components/ListScreen”导入ListScreen；
从“./components/AboutScreen”导入AboutScreen；
//开关堆栈导航器
常量切换器=createStackNavigator(
{
//从listScreen到about screen
TaskPg:ListScreen，
AboutPg:AboutScreen
},
{
//导航路线
initialRouteName:“TaskPg”，
//标题
默认导航选项：{
标题：“蓝名单”
}
}
)
//导出导航，包装根导航器的容器
导出默认createAppContainer（切换器）；
//问题不能有多个导出，切换器或应用程序类可以单独导出
//应用程序类
导出默认类应用程序扩展组件{
//u是否已登录并将状态设置为空
状态={loggedIn:null}；
组件willmount（）{
//登录时调用此函数
firebase.auth（）.onAuthStateChanged（（用户）=>{
//登录
如果（用户）{
this.setState（{loggedIn:true}）；
}//注销
否则{
this.setState（{loggedIn:false}）；
}
});
}
renderContent（）{
//根据身份验证状态呈现内容
开关（this.state.loggedIn）{
//登录时转到列表屏幕
大小写正确：返回(
)
//如果未登录，转到登录页面
案例错误：返回；
//默认情况下显示加载图标
默认值：返回
}
}
//在屏幕上呈现内容
render（）{
返回(
//内容的安全区域视图容器
{this.renderContent（）}
);
}
};
//风格
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

这是堆栈导航器所在的列表屏幕。同样，导航器只有在我删除App.js中App的导出时才能工作，因此，叹息不起作用。。。我两者都需要工作

const ListScreen = props => {


    return (
        <View style={styles.container}>

            {/* add task component with date picker */}
            <AddItemModel />

            {/* button pressed to goto About Screen */}
                <TouchableOpacity onPress={() => props.navigation.navigate('AboutPg')}>
                    <Text style={styles.aboutBtn}>About App</Text>
                </TouchableOpacity>

            {/* sign out button linked to firebase log out */}
            <TouchableOpacity onPress={() => firebase.auth().signOut()} >
                <Text style={styles.button} >Sign Out</Text>
            </TouchableOpacity>

        </View>
    );

}

const ListScreen=props=>{
返回(
{/*使用日期选择器添加任务组件*/}
您完全可以有多个导出，但不能有多个默认值导出。请尝试从“App.js”

导入{default as AppNavigator，App}

比如：

//app.js
导出默认createAppContainer（切换器）；
导出类应用程序扩展组件{}
//component.js
从“App.js”导入{默认为AppNavigator，App}
常量MyComponent=（）=>(
);

您可以有多个导出，但不能有多个默认导出。请尝试从“App.js”导入{default as AppNavigator，App}。这不起作用，出现了一个错误。我正在尝试导出而不是导入。请从

类应用程序中删除
默认值
。正如我所说，默认导出不能超过一个。请用相关文件的目录结构更新您的帖子好吗？这将有助于理解问题。解决方案建议使用should在正常设置中已足够。使用文件结构更新尝试了该操作，并出现以下错误：无法从“components/ListScreen.js”解析“app.js”，无法构建JavaScript捆绑包。在工作示例中，您如何尝试导入组件文件中的内容？将该导入语句添加到您的问题中。
“app.js”
在我的示例中，可能不符合您的正确路径。它可能类似于
。/app.js
。该组件是app.js的子组件。我不需要将堆栈导航器或app.js导入到组件中即可工作。但是，如果在app.js中有多个导出，则其中一个无法工作。我添加了该组件为您准备了一个ent代码。
import React from 'react';
import firebase from '../servers/firebase';
import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
import AddItemModel from './common/AddItemModel';

//what was suggested
import {default as AppNavigator, App} from "../App"


const ListScreen = props => {

    return (
        <View style={styles.container}>

            {/* add task component with date picker */}
            <AddItemModel />

            {/* button pressed to goto About Screen */}
                <TouchableOpacity onPress={() => props.navigation.navigate('AboutPg')}>
                    <Text style={styles.aboutBtn}>About App</Text>
                </TouchableOpacity>

            {/* sign out button linked to firebase log out */}
            <TouchableOpacity onPress={() => firebase.auth().signOut()} >
                <Text style={styles.button} >Sign Out</Text>
            </TouchableOpacity>

        </View>
    );

}