0

我刚刚使用标准的 expo 打字稿开始了一个新项目，并想使用 react-native-safe-area-context 中的 SafeAreaProvider/SafeAreaView。当我这样做并输入一个组件以使用图像进行渲染时；它显示双倍（渲染两次）。

我尝试了控制台日志，发现它被重新渲染了 3 次，我该如何防止这种情况发生？

*

应用程序.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";
import HomeScreen from "./screens/HomeScreen/HomeScreen";

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
          <HomeScreen />
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaView>
      </SafeAreaProvider>
    );
  }
}

主屏幕.tsx

import * as React from "react";
import { Image } from "react-native";

import { Text, View } from "../../components/Themed";
import styles from "./styles";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{
          uri:
            "https://www.homewallmurals.co.uk/ekmps/shops/allwallpapers/images/captain-marvel-higher-further-faster-61x91-5cm-movie-posters-31607-1-p.jpg",
        }}
      ></Image>
    </View>
  );
};

export default HomeScreen;
4

0 回答 0