在 React Native 中使用 Firebase(Firestore) 列出数据时导致空白屏幕

Question

Data listing process with Firebase(Firestore) in React Native.

In the video I watched, he wrote and ran the code that lists the coins belonging to the user using firestore. It did not work even though I wrote the same codes. What is the reason? the code does not give an error, the screen appears, but it does not list.
The problem is that when I did the listing in console it worked. However, when I try to list with FlatList, the screen appears blank.

import { View, Text, SafeAreaView, TouchableOpacity, FlatList } from 'react-native'
import React, { useContext, useState, useEffect } from 'react'

import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import IconFA from 'react-native-vector-icons/FontAwesome'

import { deviceWidth, deviceHeight } from '../../utils/dimensions'

import { AuthContext } from '../../navigation/AuthProvider'
import { Formik, validateYupSchema } from 'formik'
import * as yup from 'yup'
import { firebase } from '@react-native-firebase/auth'
import auth from '@react-native-firebase/auth'
import firestore from '@react-native-firebase/firestore'

const color = '#aaa';

const HomeScreen = ({ navigation }) => {

  const renderItem = (item) => {
    <TouchableOpacity
      key={item.id}
      style={{
        flexDirection: 'row',
        width: '95%',
        height: 60,
        borderWidth: 1,
        margin: 10,
        borderRadius: 20,
        padding: 10,
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>

      <View style={{ flex: 1 }}>
        <Text style={{
          textAlign: 'left',
          fontSize: 18
        }}>{item.coinID}</Text>
      </View>

      <View style={{ flex: 1 }}>
        <Text style={{
          textAlign: 'right',
          fontSize: 18
        }}>{item.value}</Text>
      </View>



    </TouchableOpacity>
  }

  const { signOut, user } = useContext(AuthContext);
  const [currentUser, setCurrentUser] = useState({});
  const [userCoinList, setUserCoinList] = useState([]);

  const usersColl = firestore().collection('users');
  const coinsColl = firestore().collection('coins');
  const userCoinsColl = firestore().collection('userCoins');

  useEffect(() => {

    return usersColl
      .doc(user.uid)
      .get()
      .then(result => {
        setCurrentUser(result.data());

        userCoinsColl.onSnapshot((querySnapshot) => {
          let list = [];
          querySnapshot.forEach(doc => {
            const { userID, coinID, value } = doc.data();

            if (userID == user.uid) {
              list.push({
                id: doc.id,
                userID,
                coinID,
                value
              });
              setUserCoinList(list);
            }

          });
        });

      });

  }, []);

  return (
    <SafeAreaView style={{ width: '100%', height: '100%' }}>
       <View style={{
        width: '100%',
        height: '90%',
        padding: 5,
        flex: 1,
        alignItems: 'center'
      }}>

         <View>

          <FlatList
            style={{ flex: 3, backgroundColor: '#f00' }}
            data={userCoinList}
            keyExtractor={item => item.id}
            renderItem={renderItem}
          />
          {console.log(userCoinList)}
        </View>


      </View>

    </SafeAreaView>
  )
}

export default HomeScreen

Answer 1

Your renderItem function does not return anything. Here is a fix.

const renderItem = (item) => {
    return <TouchableOpacity
      key={item.id}
      style={{
        flexDirection: 'row',
        width: '95%',
        height: 60,
        borderWidth: 1,
        margin: 10,
        borderRadius: 20,
        padding: 10,
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>

      <View style={{ flex: 1 }}>
        <Text style={{
          textAlign: 'left',
          fontSize: 18
        }}>{item.coinID}</Text>
      </View>

      <View style={{ flex: 1 }}>
        <Text style={{
          textAlign: 'right',
          fontSize: 18
        }}>{item.value}</Text>
      </View>



    </TouchableOpacity>
  }