Firebase和stack nav都无法同时在app.js中导出

Question

我的app.js文件中有一个Stack Navigator和一些firebase函数。实现Stack之后，我无法使用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',
  },
});

这里是堆栈浏览器所在的列表屏幕。同样，仅当我在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>
    );

}

我非常感谢您的帮助，我尝试了多种方法进行多次导出，以及将Firebase登录功能移至另一个组件中，但仍然遇到相同的问题。

UPDATE这是建议的内容，我试图用正确的路径添加import语句，但它不起作用。

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>
    );

}

文件目录结构屏幕截图。两个relivent文件是App.js和ListScreen.js

Answer 1

您绝对可以有多个导出，但不能有多个default个导出。尝试import {default as AppNavigator, App} from "app.js"。

所以类似：

// app.js
export default createAppContainer(Switcher);
export class App extends Component {}

// component.js
import {default as AppNavigator, App} from "app.js"

const MyComponent = () => (
  <div>
    <AppNavigator/>
    <App/>
  </div>
);