React-Native 将本地图像设置为背景图像不起作用答案

【问题标题】：React-Native set local image to background image not workingReact-Native 将本地图像设置为背景图像不起作用
【发布时间】：2021-05-15 15:16:21
【问题描述】：

我检查了其他线程，但根本没有找到答案。至少没有一个有效的答案。

这是我的代码：

我尝试过 Image、ImageBackground。我试过高度：'100%'，宽度：'100%' 我已经从 C:// 一直尝试了完整的 uri og imageAdress ...没有任何效果，我只得到白色背景，中间有“测试”文本！：

有什么想法吗？请帮忙。

【问题讨论】：

你的代码看起来不错，至少它应该显示一些东西。如果没有，那么我怀疑您传递图像的方式有问题。你能登录image看看它给你什么？

标签： image react-native background-image imagebackground

【解决方案1】：

试试这个

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

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={require('./your/image/path')} style={styles.image}>
      <Text style={styles.text}>Demo</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000a0"
  }
});

export default App;

您也可以前往https://snack.expo.io/ZL3AESjBe 观看演示。

【讨论】：

成功了！ .... 事实证明，唯一的风险是将 required 放在它自己的变量中...我检查了旧代码，只直接实现了 require 并且它起作用了。即使我认为我已经尝试过了。但是图像有点溢出，它不适合屏幕..我该如何解决这个问题_
尝试了所有调整大小的模式。没有改变。我也应该将其保留为仅具有 flex: 1 的 ImageBackground 还是应该像您一样将其包裹在视图中？什么是最好的，为什么？