使用expo應用程式回應本機渲染一個沒有錯誤的空頁面

我沒有顯示錯誤，但是當我的應用程式運行時，我得到了一個空白頁面。當開始放置一些我從另一個專案中復制和粘貼的 api 代碼時，它開始呈現一個空白頁面，在那里它作業得非常完美，但由于某種原因，它拒絕在這里作業 這就是我的代碼的樣子。這是我的 App.js 檔案

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Screen from './app/components/Screen'
import ProductScreen from './app/screens/ProductScreen';

export default function App() {

  return (
    <Screen>
      <ProductScreen />
    </Screen>
  )
}

然后這是產品 screen.js

import React, {useState, useEffect} from 'react'
import { FlatList, StyleSheet, ActivityIndicator, Text, View } from 'react-native'
import Card from '../components/Card';

export default function ProductScreen() {
    const [products, setproducts] = useState([]);
    const [loading, setloading] = useState(true);

    const getProducts = async () => {
        try {
            const response = await fetch('https://fakestoreapi.com/products/1');
            const data = await response.json();
            setproducts(data);
        } catch (error) {
            console.log("Something went wrong in your code",error)
        } finally {
            setloading(false);
        }
    }

    useEffect(() => {
        getProducts();
    }, []);

    return (
        <View>
           {loading ? <ActivityIndicator/> : (
               <FlatList
                   data={products}
                   keyExtractor={(id) => id}
                   renderItem={({item}) => (
                       <Card 
                           title={item.title}
                           subtitle={item.description}
                           img={item.image}
                       />
                   )}
               />
           )}
        </View>
    )
}

const styles = StyleSheet.create({})

最后是 card.js 檔案

import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import AppText from './AppText';

export default function Card({title, subtitle, img}) {
    return (
        <View style={styles.container}>
            <Image source={img} style={styles.image} />
            <View style={styles.cardText}>
                <AppText style={{color: "black"}}>{title}</AppText>
                <AppText style={{color: "#4ecdc4"}}>{subtitle}</AppText>
            </View>
        </View>
    )
}

我哪里會出錯？

uj5u.com熱心網友回復：

你的Expo Snack有幾個問題。首先你的表達：

{loading && <FlatList />}

是錯誤的，因為您將其設定為true在檢索資料后檢查加載時間，getProducts將其設定為false.

能夠讓它再次作業：

import React, { useState, useEffect } from 'react'
import { FlatList, StyleSheet, View } from 'react-native'
import Card from '../components/Card'

export default function ProductScreen() {
  const [products, setProducts] = useState([])
  const [loading, setLoading] = useState(true)

  const getProducts = async () => {
    try {
      const response = await fetch('https://fakestoreapi.com/products/5')
      const data = await response.json()
      setProducts([data])
      setLoading(false)
    } catch (error) {
      console.log('Something went wrong in your code', error)
    }
  }

  useEffect(() => {
    getProducts()
  }, [])

  return (
    <View style={styles.container}>
      {!loading && products.length !== 0 && (
        <View>
          <FlatList
            data={products}
            keyExtractor={(_, id) => id.toString()}
            renderItem={({ item }) => <Card title={item.title} subtitle={item.description} img={item.image} />}
          />
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'lightgrey',
    flex: 1,
  },
})

Cardfor 中存在另一個錯誤Image。傳遞影像 URL 時，每個記憶體都應該使用 URI 設定：

<Image source={{ uri: img }} style={styles.image} />

你要面對的另一個問題是ProductScreen在View風格container應該有一個flex: 1在上面的代碼顯示應用。

uj5u.com熱心網友回復：

查看snack.expo.dev/@vuyi/spontaneous-candy的代碼，似乎您在回傳ProductScreen 時缺少條件渲染。

您的代碼如下所示：

<View style={styles.container}>
           {loading &&
               <FlatList
                   data={[products]}
                   keyExtractor={(_, id) => id.toString()}
                   renderItem={({item}) => 
                       <Card 
                           title={item.title}
                           subtitle={item.description}
                           img={item.image}
                       />
                   }
               />
           }
        </View>

當它需要看起來像這樣時：

 <View style={styles.container}>
           {loading ? null :
               <FlatList
                   data={[products]}
                   keyExtractor={(_, id) => id.toString()}
                   renderItem={({item}) => 
                       <Card 
                           title={item.title}
                           subtitle={item.description}
                           img={item.image}
                       />
                   }
               />
           }
        </View>

添加該條件將阻止您的 Flatlist 組件在訪問您正在獲取的資料之前呈現。看起來您在原始帖子中是正確的，但在 Expo Snack 環境中卻沒有。

標籤：反应 反应原生 接口 世博会 使成为

上一篇：如何在React-Native中使用函式的引數

下一篇：如何使link_to文本可點擊以激活可折疊的Boostrap？