将背景图像添加到创建反应本机项目中

Question

我正在尝试将背景图像插入我的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", } }); 

说我不能办两个出口班

Answer 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 : <ImageBackground/>