react-native
Integración con Firebase para la autenticación
Buscar..
Introducción
// Reemplace los valores de base de fuego con los valores api de su aplicación importe base de fuego desde 'base de fuego';
componentWillMount () {firebase.initializeApp ({apiKey: "yourAPIKey", authDomain: "authDomainNAme", databaseURL: "yourDomainBaseURL", projectId: your firebase.auth (). signInWithEmailAndPassword (correo electrónico, contraseña) .then (this.onLoginSuccess)})}
Reaccionar nativo - ListView con Firebase
Esto es lo que hago cuando trabajo con Firebase y quiero usar ListView.
Utilice un componente principal para recuperar los datos de Firebase (Posts.js):
Posts.js
import PostsList from './PostsList';
class Posts extends Component{
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentWillMount() {
firebase.database().ref('Posts/').on('value', function(data) {
this.setState({ posts: data.val() });
});
}
render() {
return <PostsList posts={this.state.posts}/>
}
}
PostsList.js
class PostsList extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
}
}
getDataSource(posts: Array<any>): ListView.DataSource {
if(!posts) return;
return this.state.dataSource.cloneWithRows(posts);
}
componentDidMount() {
this.setState({dataSource: this.getDataSource(this.props.posts)});
}
componentWillReceiveProps(props) {
this.setState({dataSource: this.getDataSource(props.posts)});
}
renderRow = (post) => {
return (
<View>
<Text>{post.title}</Text>
<Text>{post.content}</Text>
</View>
);
}
render() {
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
enableEmptySections={true}
/>
);
}
}
Quiero señalar que en Posts.js
, no estoy importando firebase
porque solo necesita importarlo una vez, en el componente principal de su proyecto (donde tiene el navegador) y usarlo en cualquier lugar.
Esta es la solución que alguien sugirió en una pregunta que hice cuando estaba luchando con ListView. Pensé que sería bueno compartirlo.
Fuente: [ http://stackoverflow.com/questions/38414289/react-native-listview-not-rendering-data-from-firebase◆ [ ]]
Autenticación en React Native usando Firebase
Reemplace los valores de base de fuego con los valores api de su aplicación:
import firebase from 'firebase';
componentWillMount() {
firebase.initializeApp({
apiKey: "yourAPIKey",
authDomain: "authDomainNAme",
databaseURL: "yourDomainBaseURL",
projectId: "yourProjectID",
storageBucket: "storageBUcketValue",
messagingSenderId: "senderIdValue"
});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(this.onLoginSuccess)
.catch(() => {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(this.onLoginSuccess)
.catch(this.onLoginFail)
})
}