爲什麼我的firebase配置工作不正常？

Question

我試圖盡我所能模塊化我的代碼。如果在github上共享我的App.js，我不希望不得不刪除這些id，我寧願將它包含在一個單獨的文件中，只是將它加入.gitignore它。

出於某種原因，我的應用程序只是真的不喜歡我這樣做的方式，而且我正在努力解決這個問題。任何想法我做錯了什麼？

這是我App.js文件：

import firebase from 'firebase'; 
import { 
    apiKey, 
    authDomain, 
    databaseURL, 
    storageBucket, 
    messagingSenderId 
} from './constants/Keys'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this._navContext = initNavigationContext(); 
    } 

    componentWillMount() { 
    const config = { 
    apiKey, 
    authDomain, 
    databaseURL, 
    storageBucket, 
    messagingSenderId 
    }; 

    firebase.initializeApp(config); 
    } 

    render() { 
    return (
     <Provider store={Store}> 
     <NavigationProvider context={this._navContext}> 
      <StackNavigation navigatorUID="root" id="root" initialRoute={Router.getRoute('auth')} /> 
     </NavigationProvider> 
     </Provider> 
    ); 
    } 
} 

export default App; 

我省略了其它導入語句在這裏。

這裏是我的Keys文件：

const apiKey = '//////'; 
const authDomain = '//////'; 
const databaseURL = '//////'; 
const storageBucket = '//////'; 
const messagingSenderId = '//////'; 


const facebookAppID = '//////'; 

export default { 
    apiKey, 
    authDomain, 
    databaseURL, 
    storageBucket, 
    messagingSenderId, 
    facebookAppID 
}; 

任何想法，我做錯了什麼？

Answer 1

我認爲你的問題是你試圖破壞默認導出，而ES6模塊做的是使用解構來命名導出。如果您導入的值全部爲undefined，則情況可能如此。您可以執行以下操作：

export const apiKey = '//////'; 
export const authDomain = '//////'; 
export const databaseURL = '//////'; 
export const storageBucket = '//////'; 
export const messagingSenderId = '//////'; 


export const facebookAppID = '//////'; 

然後它應該工作。