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

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://facebook.github.io/react-native/docs/images#background-image-via-nesting