react-native
Integration mit Firebase zur Authentifizierung

Einführung

Reagieren Sie nativ - ListView mit Firebase

Das mache ich, wenn ich mit Firebase arbeite und ListView verwenden möchte.

Verwenden Sie eine übergeordnete Komponente, um die Daten von Firebase (Posts.js) abzurufen:

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}
            />
        );
    }
}

Ich möchte darauf hinweisen, dass ich in Posts.js keine firebase importiere, da Sie sie nur einmal in der Hauptkomponente Ihres Projekts (wo Sie den Navigator haben) importieren und überall verwenden können.

Dies ist die Lösung, die jemand in einer Frage vorgeschlagen hatte, als ich mit ListView zu kämpfen hatte. Ich dachte, es wäre schön, es zu teilen.

Quelle: [ http://stackoverflow.com/questions/38414289/react-native-listview-not-rendering-data-from-firebase([1]

Authentifizierung in React Native mit Firebase

Ersetzen Sie die Firebase-Werte durch Ihre App-API-Werte:

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)
  })
}