2017-12-27 1148 views
1

我正在使用reactnative,redux和firebase。 现在我想配置两个差异firebase env一个是开发,另一个是生产。如何使用反应原生切换Firebase配置

我实现了切换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); 

回答

0

你要派那个眼泪就下来了你的火力实例(firebase.initializeApp({...});)当开关切换动作和初始化新的火力点应用程序会与(部分)你想要的凭据。这意味着您可能希望在您的App.jscomponentWillMount函数中发送新的initilizeFirebase动作。然后,您的Home.js应从商店中提取已配置的Firebase实例。这也意味着您可能也希望将您的Firebase实例保存在商店中。

+0

我想你想说, 在App.js - > componentWillMount 需要派遣行动“initilizeFirebase” 并在行动“initilizeFirebase”将初始化的火力点。 因此,当从“Home.js”开启时将调度“initilizeFirebase”动作以配置生产Firebase配置。 对吗?或者你想说些不同的东西? –

+0

我想我们说的是类似的东西。基本上初始化应用程序启动时的firebase(app.js#cdm),并允许按钮分派相同的动作,但使用不同的动作参数。 –