如何使用反應原生切換Firebase配置

Question

我正在使用reactnative，redux和firebase。 現在我想配置兩個差異firebase env一個是開發，另一個是生產。

我實現了切換firebase diff帳戶的切換。

我把火力配置文件中./App.js

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import firebase from 'firebase'; 

import store from './src/config/store'; 
import AppNavigation from './src/navigation'; 

class App extends Component { 

    componentWillMount() { 
    firebase.initializeApp({ 
     apiKey: 'AIzaSyAandJABqieT3fXk2palvAgbYz5B8y9EsM', 
     authDomain: 'practiciaappsubu.firebaseapp.com', 
     databaseURL: 'https://practiciaappsubu.firebaseio.com', 
     projectId: 'practiciaappsubu', 
     storageBucket: 'practiciaappsubu.appspot.com', 
     messagingSenderId: '753143230840' 
    }); 
    firebase.auth().onAuthStateChanged((user) => { 
     if (user) { 
    console.log('logged In'); 
     } else { 
    console.log('not looged in'); 
     } 
    }); 
    } 

    render() { 
    return (
     <Provider store={store}> 
    <AppNavigation /> 
     </Provider> 
    ); 
    } 
} 

export default App; 

的切換是有家庭的組成部分。所以，在改變家庭組件的切換之後，我如何獲得./App.js文件中的切換狀態？

的Home.js

import React, { Component } from 'react'; 
import { 
    Text, 
    View, 
    Image, 
    ScrollView, 
    Switch 
} from 'react-native'; 
import { connect } from 'react-redux'; 
import { NavigationActions } from 'react-navigation'; 

import { Button, Section } from './helpers'; 
import { userType } from '../config/MasterData'; 
import { firebaseEnvAction } from '../actions/HomeAction'; 

class Home extends Component { 
    static navigationOptions = { 
    title: '.: Practicia :.' 
    }; 

onPressSignupAs(userInfo) { 
    // Navigate to sign up page with the user information 
    console.log(userInfo); 
} 

onPressLogin() { 
    // Navigate to login page 
    const navigateToLogin = NavigationActions.navigate({ 
    routeName: 'login', 
    params: {} 
    }); 
    this.props.navigation.dispatch(navigateToLogin); 
} 

firebaseEnv(val) { 
    this.props.firebaseEnvAction(val); 
} 

    render() { 
    return (
     <ScrollView contentContainerStyle={styles.contentContainer}> 
    <View style={styles.container}> 
     <View style={styles.logoContainer}> 
      <Image 
     style={styles.logo} 
     source={require('../assets/images/logo.png')} 
      /> 
     </View> 
     <View style={styles.contentArea}> 
     <Text style={styles.signInAs}>Sign Up As...</Text> 
     <Section> 
      <Button 
      onPress={this.onPressSignupAs.bind(this, userType.teacher)} 
      > 
     {userType.teacher.showText} 
      </Button> 
     </Section> 
     <Section> 
      <Button 
      onPress={this.onPressSignupAs.bind(this, userType.parent)} 
      >{userType.parent.showText}</Button> 
     </Section> 
     <Section> 
      <Button 
      onPress={this.onPressSignupAs.bind(this, userType.student)} 
      > 
      {userType.student.showText} 
      </Button> 
     </Section> 
     </View> 
     <View style={styles.LoginBox}> 
     <Text style={styles.LoginText}>Already have an account? </Text> 
     <Section> 
      <Button 
      style={styles.buttonLogin} 
      styleText={styles.buttonText} 
      onPress={this.onPressLogin.bind(this)} 
      > 
     Login 
      </Button> 
     </Section> 
     <Section> 
      <Text style={styles.firebaseText}>Firebase: 
     <Switch 
      value={this.props.HomeReducer.firebaseToggle} 
      onValueChange={(val) => this.firebaseEnv(val)} 
      disabled={false} 
      activeText={'Prod'} 
      inActiveText={'Dev'} 
      circleSize={30} 
      barHeight={1} 
      circleBorderWidth={3} 
      backgroundActive={'green'} 
      backgroundInactive={'gray'} 
      circleActiveColor={'#30a566'} 
      circleInActiveColor={'#000000'} 
     /> 
      </Text> 
     </Section> 
     </View> 
    </View> 
    </ScrollView> 
    ); 
    } 
} 

const styles = { 
    firebaseText: { 
    fontSize: 20 
    }, 
    contentContainer: { 
    flex: 1 
    }, 
    container: { 
    backgroundColor: '#FFFFFF', 
    borderRadius: 4, 
    borderWidth: 0.5, 
    borderColor: '#9DDAEE', 
    flex: 1, 
    padding: 10, 
    justifyContent: 'center', 
    }, 
    userType: { 
    fontSize: 23, 
    fontWeight: 'bold', 
    backgroundColor: '#3BAFDA', 
    margin: 10, 
    padding: 10, 
    textAlign: 'center', 
    color: '#fff', 
    }, 
    contentArea: { 
    marginLeft: 40, 
    marginRight: 40, 
    marginBottom: 20, 
    }, 
    logoContainer: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginTop: 10, 
    marginBottom: 40, 
    }, 
    logo: { 
    width: 250, 
    height: 75, 
    }, 
    signInAs: { 
    fontSize: 20, 
    textAlign: 'center', 
    marginBottom: 10, 
    }, 
    LoginBox: { 
    marginTop: 20, 
    marginLeft: 40, 
    marginRight: 40, 
    }, 
    LoginText: { 
    fontSize: 15, 
    textAlign: 'center', 
    marginBottom: 10, 
    }, 
    buttonLogin: { 
    backgroundColor: '#C4C4C4', 
    }, 
    buttonText: { 
    color: '#000000', 
    } 
}; 

const mapStateToProps = (state) => { 
    return state; 
}; 

const mapDispatchToProps = { 
    firebaseEnvAction 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(Home); 

Answer 1

你要派那個眼淚就下來了你的火力實例（firebase.initializeApp({...});）當開關切換動作和初始化新的火力點應用程序會與（部分）你想要的憑據。這意味着您可能希望在您的App.jscomponentWillMount函數中發送新的initilizeFirebase動作。然後，您的Home.js應從商店中提取已配置的Firebase實例。這也意味着您可能也希望將您的Firebase實例保存在商店中。