react-native
प्रमाणीकरण के लिए फायरबेस के साथ एकीकरण

परिचय

प्रतिक्रियाशील मूल - Firebase के साथ ListView

यह वही है जब मैं फायरबेस के साथ काम कर रहा हूं और मैं ListView का उपयोग करना चाहता हूं।

Firebase (Post.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}
            />
        );
    }
}

मैं बाहर बात करने के लिए है कि में चाहते Posts.js , मैं आयात नहीं कर रहा हूँ firebase क्योंकि आप केवल एक बार यह आयात करते हैं, अपनी परियोजना का मुख्य घटक (जहां नाविक है) और इसे कहीं भी उपयोग करने के लिए की जरूरत है।

यह वह समाधान है जो किसी ने मेरे द्वारा पूछे गए प्रश्न में सुझाया था जब मैं सूची दृश्य के साथ संघर्ष कर रहा था। मुझे लगा कि इसे साझा करना अच्छा होगा।

स्रोत: [ http://stackoverflow.com/questions/38414289/react-native-listview-not-rendering-data-from-firebasedeside1]

Firebase का उपयोग करते हुए प्रतिक्रियाशील मूल में प्रमाणीकरण

अपने ऐप एपीआई मूल्यों के साथ फायरबेस मूल्यों को बदलें:

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