반응 네이티브에서 토글을 사용하여 firebase 구성을 전환하는 방법

Question

reactnative, redux 및 firebase를 사용하고 있습니다. 이제는 두 가지 diff firebase env를 설정하고 싶습니다. 하나는 개발이고 다른 하나는 production입니다.

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; 

토글 집의 구성 요소가 있습니다에서 중포 기지 config 파일을 넣어. 그래서, 홈 componet에서 토글을 변경 한 후 ./App.js 파일에서 토글 상태를 어떻게 얻을 수 있습니까? 당신은 당신의 중포 기지 예 (firebase.initializeApp({...});)를 누른 눈물 스위치가 교체 작업을 파견 할과 함께 새로운 중포 기지 응용 프로그램을 초기화합니다

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

Home.js (구성 요소) 원하는 자격 증명. 즉, App.jscomponentWillMount 함수에 새로운 initilizeFirebase 액션을 전달하고 싶을 것입니다. 그런 다음 Home.js은 저장소에서 구성된 firebase 인스턴스를 가져와야합니다. 이것은 또한 스토어에 firebase 인스턴스를 유지하려고 할 것임을 의미합니다. > componentWillMount 필요 초기화 중포 기지를 가지고하는 행동 "initilizeFirebase" 과 행동 "initilizeFirebase"의를 파견 -