如何使用反应原生切换Firebase配置

• Z时代
• 2024-01-10
• 分类：问答

我正在使用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); 

回答：

以上是 如何使用反应原生切换Firebase配置 的全部内容， 来源链接： utcz.com/qa/267009.html