Добавление фонового изображения в проект create-react-native
Я пытаюсь вставить фоновое изображение в свой проект create-react-native. Я хотел бы добавить это изображение: https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg. Я попытался применить его к таблице стилей, но он не принимает тег background-image. Я очень новичок в реакции.
import React from 'react';
import { StyleSheet, Text, View, TextInput, Button} from 'react-native';
import ListItem from "/Users/Westin/assignment5/ListItem";
export default class App extends React.Component {
state = {
thing: "",
things: [],
};
thingValueChanged = value =>{
//alert(value);
this.setState({
thing: value
});
}
onClickingAdd = () =>
{
if (this.state.thing === "")
{
return;
}
this.setState(prevState => {
return {
things: prevState.things.concat(prevState.thing)
};
});
}
render() {
const thingsOut = this.state.things.map((thing,i) => (<ListItem key = {i} thing = {thing} />))
return (
<View style = {styles.container}>
<View style = {styles.header}>
<Text style = {styles.headerText}>My Favourite Things</Text>
</View>
<View style = {styles.input}>
<TextInput
value = {this.state.thing}
placeholder = "Add your favourite things"
style = {styles.inputbox}
onChangeText = {this.thingValueChanged}
/>
<Button
title = "Add"
style = {styles.addButton}
onPress = {this.onClickingAdd}
/>
</View>
<View>
{thingsOut}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e6eeff',
alignItems: 'center',
justifyContent: 'flex-start',
paddingTop: 30,
},
header: {
padding: 10,
},
headerText: {
fontSize: 30,
color: '#003cb3',
},
inputbox: {
borderWidth: 1,
height: 40,
width: "70%",
},
addButton: {
width: "30%"
},
input: {
flexDirection: "row",
width: '100%',
justifyContent: "space-evenly",
alignItems: "center",
}
});Это код, который я пытался запустить
import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image } from 'react-native';
import ListItem from "/Users/Westin/assignment5/ListItem";
const remote = 'https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg';
export default class BackgroundImage extends Component {
render() {
const resizeMode = 'center';
return (
<Image
style = {{
flex: 1,
resizeMode,
}}
source = {{ uri: remote }}
/>
);
}
}
AppRegistry.registerComponent('BackgroundImage', () => BackgroundImage);
export default class App extends React.Component {
state = {
thing: "",
things: [],
};
thingValueChanged = value =>{
//alert(value);
this.setState({
thing: value
});
}
onClickingAdd = () =>
{
if (this.state.thing === "")
{
return;
}
this.setState(prevState => {
return {
things: prevState.things.concat(prevState.thing)
};
});
}
render() {
const thingsOut = this.state.things.map((thing,i) => (<ListItem key = {i} thing = {thing} />))
return (
<View style = {styles.container}>
<View style = {styles.header}>
<Text style = {styles.headerText}>My Favourite Things</Text>
</View>
<View style = {styles.input}>
<TextInput
value = {this.state.thing}
placeholder = "Add your favourite things"
style = {styles.inputbox}
onChangeText = {this.thingValueChanged}
/>
<Button
title = "Add"
style = {styles.addButton}
onPress = {this.onClickingAdd}
/>
</View>
<View>
{thingsOut}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'black',
opacity: 0.5,
justifyContent: 'flex-start',
paddingTop: 30,
},
header: {
padding: 10,
},
headerText: {
fontSize: 30,
color: '#003cb3',
},
inputbox: {
borderWidth: 1,
height: 40,
width: "70%",
backgroundColor: 'white',
},
addButton: {
width: "30%"
},
input: {
flexDirection: "row",
width: '100%',
justifyContent: "space-evenly",
alignItems: "center",
}
});Он сказал, что я не могу запустить два экспортных класса
Я не знаю, как публиковать здесь
Он позволяет использовать только определенное количество символов, мой код не помещается в комментариях
Я добавил это в правку
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Этот код работает для меня:
import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ImageBackground source=
{ {uri: 'https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg' } }
style = {styles.container}
>
<Text>Some</Text>
<Text>Text</Text>
<Text>Centered</Text>
<Text>In</Text>
<Text>Columns</Text>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '100%'
},
});
Вы можете узнать больше о <ImageBackground/> здесь: https://facebook.github.io/react-native/docs/images#background-image-via-nesting
Я пробовал это и продолжал получать сообщение об ошибке: Невозможно разрешить / Users / Westin / assignment5 / background "from" ./C: \\ Users \\ Westin \\ assignment5 \\ App.js: The module / Users / Westin / assignment5 / background` невозможно найти"
фон - это название моей фотографии
Хм, я пробую и не могу заставить его работать ни с синтаксисом require(), ни с синтаксисом { uri: '...' }. Странно, позвольте мне потратить некоторое время, чтобы посмотреть, есть ли обходной путь.
Предоставленный образец работает для меня (с реактивным ~0.55.2 внутри моего package.json). Убедитесь, что ваш эквивалент.
Не похоже, что вы можете обернуть <ImageBackground> внутри <View>, не скрывая фоновое изображение, поэтому вам нужно использовать стиль, который я предоставил применительно к <ImageBackground>. YMMV.
Я пробовал использовать этот метод, но он приводит к исчезновению самого приложения. Мне нужен фон, чтобы за ним сидеть. В этом случае это приводит к смещению остальной части приложения.
Теги <View> конфликтуют с тегом <ImageBackground>. Я рекомендую убрать поведение (onPress и т. д.) И сосредоточиться на ваших структурах представления. Вот отправная точка: gist.github.com/xrd/9ad61dad432d39aec28e967619859e9f. Это визуализирует желаемое фоновое изображение. Вы должны поиграть со стилями и посмотреть, сможете ли вы правильно разложить все подкомпоненты в фоновом изображении.
Чтобы быть более ясным, в атрибуте «flex» в CSS есть что-то, что скрывает компонент фонового изображения. Если вы удалите это из стиля, он работает (более или менее). Итак, я думаю, вам просто нужно переместить свои стили, которые находятся в представлениях, в ImageBackground, который охватывает другие компоненты и заменяет компоненты <View>. Вы приближаетесь, не уходите!
Можете показать, какой код пробовали? Я не вижу ссылки на это изображение в опубликованном вами коде.