Я пытаюсь сделать что-то очень простое в React, но у меня проблемы. Я хочу установить изображение в качестве фона полного окна моего сайта.
С помощью стилей CSS мне удалось заставить изображение появляться. Но у меня были проблемы с настройкой изображения в качестве фона полного окна. Поэтому я попробовал свои силы в стиле React.
import React, { Component } from "react";
import logo from "./logo.svg";
import code from "./code.jpg";
import "./App.css";
function App() {
var styles = StyleSheet.create({
bgImage: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "stretch",
resizeMode: "stretch"
}
});
return (
<React.Fragment>
<Image
source={require("image!background")}
style={styles.bgImage}
alt="background"
>
pizza
</Image>
</React.Fragment>
);
}
export default App;
Я довольно новичок в React. Спасибо всем, кто может помочь мне понять, что происходит!
2 ответа
<Image
source={require("image!background")}
style={styles.bgImage}
width="100%"
alt="background"
>
Редактировать:
Да, это правда, вы на самом деле не определили <Image />
, откуда это?
Вы хотели использовать элемент html <img />
. Все прописные элементы зависят от конкретной реакции и не могут быть зарегистрированы глобально, поэтому вам нужно импортировать этот <Image />
компонент здесь, где бы он ни был определен в вашем приложении.
Вторая ошибка также действительна. что вы пытаетесь сделать с помощью синтаксиса "изображение! фон"
Насколько я знаю, это неверный синтаксис. «!» обычно означает «нет» в условном выражении. Такие как
2 !== 3
Или
2 is not equal to 3
Вы можете использовать это CSS
var styles = StyleSheet.create({
bgImage: {
backgroundRepeat:'no-repeat',
backgroundSize:'cover',
height:'100%',
backgroundPosition:'bottom'
}
});
Похожие вопросы
Новые вопросы
reactjs
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он использует декларативную компонентную парадигму и стремится быть одновременно эффективным и гибким.