ReactNative (Expo)로 firebase의 데이터를 출력시킨다

개인적으로 ReactNative 초보자가 넘어질 것 같은 포인트를 정리했습니다.
ReactNative에서 백엔드에 firebase를 사용하는 경우가 많습니다만, 실제로 데이터를 끌어와서 데이터를 단말에 출력시킨다는 일련의 흐름을 자세하게 설명하고 있는 기사가 적고(나의 조사 부족일지도 모릅니다. 가), 꽤 끓인 것 같았기 때문에 여기에 실어 둡니다.

Firebase의 프로젝트의 작성은 화면에서 포치포치 하고 있으면 할 수 있으므로 생략하네요.
htps : // 푹 빠져라. 오, ぇ. 이 m/? hl = 그럼

전제로서, firebase의 databese(cloudfirebase)에는 데이터가 들어 있다.
collection 이름: user
문서 이름: 자동 id
필드 이름: comment, name

이번에는 hiroshi라는 데이터가 name에 들어 있다고 가정합니다.

Firebase SDK를 설치.

npm i --save firebase

firebase로 실제로 프로젝트를 작성한 후, 그 프로젝트의 setting→전반에서 아래와 같은 api가 발행되고 있으므로 이것을 완전히 copipe 해, firebase.js에 페이스로 합니다.



firebase.js

export const firebaseConfig = {
  apiKey: "******************",
  authDomain: "******************",
  databaseURL: "******************",
  projectId: "******************",
  storageBucket: "******************",
  messagingSenderId: "******************",
  appId: "******************",
  measurementId: "******************"
};

이번에는 Expo를 사용합니다. Expo에 대해 모르는 분은 구구라고 조사해 보세요.

$ expo init Sampleproject
$ cd Sampleproject
$ expo start

App.js가 프로젝트에 있다고 생각하므로 다음과 같이 다시 작성하십시오.

App.js

import React from "react";
import { StyleSheet, Text, View, StatusBar, FlatList } from "react-native";
import firebase from "firebase";
import { firebaseConfig } from "./firebase/config"
import {
  Container,
  Content,
} from "native-base";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dataItem: "",
      dataSource: []
    };
  }

  componentDidMount() {
    var db = firebaseApp.firestore();
    db.collection("user")
      .get()
      .then(query => {
        var buff = [];
        query.forEach(doc => {
          var data = doc.data();
          buff.push(data);
        });
        this.setState({ dataSource: buff });
      });
  }

  render() {
    return (
      <Container style={styles.container}>
        <Content>
          <FlatList
            data={this.state.dataSource}
            numColumns={2}
            renderItem={({ item }) => {
              return (
                <View style={styles.listItem}>
                  <Text>{item.name}</Text>
                </View>
              );
            }}
            keyExtractor={item => `${item.name}`}
          />
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  }
});

여기부터가 본제로, 나는 이대로 기동하면 이하의 Warning이 나와 데이터를 취득할 수 없다고 하는 상태가 되었습니다. 그래서 그 에러들을 해결해 나가려고 합니다.

오류①

App named '[DEFAULT]' already exists

이것은 아래에서 해결됩니다.

const firebaseApp = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app()

오류②

다음 이 부분

Unhandled promise rejection: ReferenceError: Can't find variable: atob

이것은 아래 부분을 위의 소스 코드에 추가해야합니다.
Firebase SDK 7.9.1 이상에서 발생하는 문제이므로 7.9.0으로 해주면 해결.
그 때 캐시를 지울 것

import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

$ npm install [email protected]
$ expo r -c

그러면 expo 화면에 다음과 같이 표시되어야합니다.



참고문헌
htps // ch. 도 f도 f. 이. jp/b㎉g/게 ts-r r-d-e x 뽀후레 s 잡아. HTML
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 60361519 / 칸 t 푹 d 아