如何向我的 React Native 應用程序添加背景圖片？

Question

我對原生反應還很陌生，但我有一些經驗。 我正在按照我已經完成的教程並進行自己的修改，為 ios 和 android 創建自己的應用程序。 因為我正在創建一個應用程序，所以我忘了添加背景圖片。 經過幾天的掙扎，我很絕望，所以我決定在這里問我的問題。

我正在嘗試將背景圖片添加到我的 App.js 文件中。 圖像加載正確，但我的頁面內容（位於<LifelineNavigator />內）對於 android 要么隱藏要么消失。對於 ios，內容似乎位於一個小的居中 flexbox。此外，我正在嘗試刪除白色背景。

任何建議肯定會有所幫助。 非常感謝！ 上帝保佑！

這是我的代碼：

import React, { useState } from "react";
import { StyleSheet, View, ImageBackground } from "react-native";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import { enableScreens } from "react-native-screens";
    
import LifelineNavigator from "./src/navigation/LifelineNavigator";

enableScreens();

const fetchFonts = () => {
   return Font.loadAsync({
      "Gotham-Medium": require("./src/assets/fonts/Gotham-Font/Gotham-Medium.otf")

const image = {
    uri: "https://i.ibb.co/8z6QbTS/Lifeline-Gradient-Background-24.png",
    };

const App = () => {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <View >
      <ImageBackground source={image} style={styles.image}>
        <View style={ styles.container }>
            <LifelineNavigator />
        </View>
      </ImageBackground> 
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  image: { 
    width: "100%", 
    height: "100%" ,
  }
});

export default App;

IOS 截圖

Android 截圖

Answer 1

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

按照此文檔 > https://reactnative.dev/docs/imagebackground可能會解決您的問題