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

Question

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

所以这是我的代码：

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

有任何想法吗？请帮忙。

Answer 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进行演示。