我正在使用reactnative,redux和firebase。现在我想配置两个差异firebase env一个是开发,另一个是生产。
我实现了一个切换来切换firebase diff帐户。
我把firebase配置文件放在./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;
切换是有Home组件。因此,在从Home组件更改切换后,如何在./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实例(firebase.initializeApp({...});
)并使用你想要的凭据初始化一个新的firebase应用程序时,你会想要调度一个动作。这意味着你可能想要在你的initilizeFirebase
App.js
函数中发送一个新的componentWillMount
动作。然后你的Home.js
应该从商店中提取配置的firebase实例。这也意味着您可能还希望将firebase实例保留在商店中。