[英]Adding background image to create-react-native project
I am trying to insert a background image into my create-react-native project. 我正在尝试将背景图像插入我的create-react-native项目中。 I would like to be able to add this image: https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg . 我希望能够添加此图像: https : //i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg 。 I have tried applying it to the stylesheet but it is not accepting the background-image tag. 我尝试将其应用于样式表,但它不接受background-image标签。 I am very new at react. 我反应很新。
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", } });
This is the code I tried to run 这是我尝试运行的代码
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", } });
It said I cant run two export classes 说我不能办两个出口班
This code works for me: 该代码对我有用:
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%'
},
});
You can read more about <ImageBackground/>
here: https://facebook.github.io/react-native/docs/images#background-image-via-nesting 您可以在此处阅读有关<ImageBackground/>
更多信息: https : <ImageBackground/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.