เป็นวิธีที่ดีที่สุดในการเพิ่มภาพพื้นหลังแบบเต็มหน้าจอใน React Native

ฉันต้องการเพิ่มภาพเต็มหน้าจอลงในมุมมองดังนั้นฉันจึงเขียนรหัสนี้

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

และกำหนดสไตล์เป็น

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

แต่ด้วยวิธีนี้ฉันจะค้นหาขนาดหน้าจอ iPhone จริงได้อย่างไร

ฉันเห็น API เพื่อเข้าถึง Pixel Density แต่ไม่มีอะไรเกี่ยวกับขนาดหน้าจอ ...

ความคิดใด ๆ

คุณสามารถใช้flex: 1สไตล์ใน<Image>องค์ประกอบเพื่อให้เต็มหน้าจอ จากนั้นคุณสามารถใช้หนึ่งในโหมดปรับขนาดภาพเพื่อให้ภาพเติมองค์ประกอบทั้งหมด:

<Image source={require('image!egg')} style={styles.backgroundImage} />

สไตล์:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

ฉันค่อนข้างแน่ใจว่าคุณสามารถกำจัด<View>ภาพของคุณและมันจะใช้ได้

(สิ่งนี้เลิกใช้แล้วในตอนนี้คุณสามารถใช้ImageBackground ได้ )

นี่คือวิธีที่ฉันทำ ข้อตกลงหลักคือการกำจัดขนาดคงที่

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};

หมายเหตุ: วิธีนี้เป็นรุ่นเก่า โปรดดูที่ https://facebook.github.io/react-native/docs/images.html#background-image-via-nestingแทน

ลองวิธีนี้ ได้รับการสนับสนุนอย่างเป็นทางการ ฉันเพิ่งทดสอบและใช้งานได้อย่างไม่มีที่ติ

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

และสำหรับใช้เป็นภาพพื้นหลังให้ทำดังต่อไปนี้

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

ฉันลองหลายคำตอบเหล่านี้เพื่อประโยชน์สำหรับ Android โดยใช้รุ่นภาษาพื้นเมือง = 0.19.0

ด้วยเหตุผลบางอย่าง resizeMode ในสไตล์ชีทของฉันไม่ทำงานอย่างเหมาะสม? อย่างไรก็ตามเมื่อ sytlesheet มี

backgroundImage: {
flex: 1,
width: null,
height: null,
}

และภายในแท็กรูปภาพฉันระบุ resizeMode:

<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

มันทำงานได้อย่างสมบูรณ์แบบ! ดังกล่าวข้างต้นคุณสามารถใช้ Image.resizeMode.cover หรือมีเช่นกัน

หวังว่านี่จะช่วยได้!

อัพเดตเมื่อเดือนมีนาคม 2018 การใช้อิมเมจนั้นเลิกใช้แล้ว ImageBackground

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

จากคำตอบของBraden Rockwell Napierฉันสร้างส่วนประกอบนี้BackgroundImage

BackgroundImage.js

import React, { Component } from 'react'
import { Image } from 'react-native'

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>

หากคุณต้องการใช้เป็นภาพพื้นหลังคุณจะต้องใช้<ImageBackground>ส่วนประกอบใหม่ที่เปิดตัวในปลายเดือนมิถุนายน 2560ใน v0.46 รองรับการทำรังในขณะที่<Image>อีกไม่นาน

นี่คือสรุปการกระทำ :

เรากำลังลบการสนับสนุนมุมมองการซ้อนภายในคอมโพเนนต์ เราตัดสินใจทำเช่นนี้เพราะการมีคุณสมบัตินี้ทำให้การสนับสนุน intrinsinc content sizeเป็น<Image>ไปไม่ได้ ดังนั้นเมื่อกระบวนการเปลี่ยนแปลงเสร็จสิ้นแล้วคุณไม่จำเป็นต้องระบุขนาดรูปภาพอย่างชัดเจนจึงสามารถสรุปได้จากบิตแมปรูปภาพจริง

และนี่คือขั้นตอนที่ 0

เป็นการแทนที่แบบหล่นในที่ง่ายมากซึ่งใช้ฟังก์ชันนี้ผ่านการออกแบบที่เรียบง่าย กรุณาใช้แทนถ้าคุณต้องการที่จะใส่อะไรเข้าไป

อัปเดตเป็น ImageBackground

เนื่องจากการใช้<Image />เป็นที่บรรจุเลิกใช้งานไประยะหนึ่งแล้วคำตอบทั้งหมดพลาดสิ่งที่สำคัญจริงๆ สำหรับการใช้งานที่เหมาะสมเลือก<ImageBackground />ด้วยstyle และ imageStyleเสา imageStyleสมัครภาพรูปแบบที่เกี่ยวข้องทั้งหมดเพื่อ

ตัวอย่างเช่น:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

โอ้พระเจ้าในที่สุดฉันก็พบวิธีที่ยอดเยี่ยมสำหรับ React-Native V 0.52-RC และ native-base:

แท็กเนื้อหาของคุณควรเป็นดังนี้: // ======================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

และสไตล์ที่สำคัญของคุณคือ // // ========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

มันใช้งานได้กับเพื่อนที่ดี ... ขอให้สนุก

ตั้งแต่ 0.14 วิธีนี้ใช้ไม่ได้ดังนั้นฉันจึงสร้างส่วนประกอบแบบคงที่ที่จะทำให้มันง่ายสำหรับคุณ คุณสามารถวางสิ่งนี้ในหรืออ้างอิงมันเป็นส่วนประกอบ

สิ่งนี้ควรใช้ซ้ำได้และจะช่วยให้คุณสามารถเพิ่มสไตล์และคุณสมบัติเพิ่มเติมได้ราวกับว่ามันเป็น<Image />องค์ประกอบมาตรฐาน

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

เพียงแค่วางในและจากนั้นคุณสามารถใช้มันเหมือนภาพและมันควรจะพอดีกับขนาดทั้งหมดของมุมมองที่มีอยู่ (ดังนั้นถ้ามันเป็นมุมมองด้านบนมันจะเติมเต็มหน้าจอของคุณ

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

คลิกที่นี่เพื่อดูภาพตัวอย่าง

ล่าสุด ณ Oct'17 (RN> = .46)

import React from 'react';
import { 
  ...
  ImageBackground,
} from 'react-native';

render() {
  return (
    <ImageBackground source={require('path/to/img')} style={styles.urStyle}>
    </ImageBackground>
  );
}

http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting

เพื่อจัดการกรณีการใช้งานนี้คุณสามารถใช้<ImageBackground>ส่วนประกอบซึ่งมีอุปกรณ์ประกอบฉากแบบเดียวกัน<Image>และเพิ่มเด็ก ๆ ที่คุณต้องการเลเยอร์ด้านบน

ตัวอย่าง:

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

สำหรับข้อมูลเพิ่มเติม: ImageBackground | ตอบสนองพื้นเมือง

โปรดทราบว่าคุณต้องระบุแอตทริบิวต์ความกว้างและความสูงบางอย่าง

import { ImageBackground } from "react-native";
<ImageBackground
     style={{width: '100%', height: '100%'}}
     source={require('../assets/backgroundLogin.jpg ')}> //path here inside
    <Text>React</Text>
</ImageBackground>

คุณต้องตรวจสอบให้แน่ใจว่ารูปภาพของคุณมี resizeMode = {Image.resizeMode.contain} หรือ {Image.resizeMode.stretch} และตั้งค่าความกว้างของรูปแบบของภาพเป็น null

<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>

ความกว้างและความสูงที่มีค่า null ไม่ได้ผลสำหรับฉันจากนั้นฉันคิดว่าจะใช้ตำแหน่งบน, ล่าง, ซ้ายและขวาและใช้งานได้ ตัวอย่าง:

bg: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        resizeMode: 'stretch',
},

และ JSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />

(RN> = .46)

องค์ประกอบไม่สามารถมีลูกได้หากคุณต้องการแสดงเนื้อหาที่ด้านบนของภาพพิจารณาใช้การจัดตำแหน่งแบบสัมบูรณ์

หรือคุณสามารถใช้ImageBackground

import React from 'react';
import { 
  ...
  StyleSheet,
  ImageBackground,
} from 'react-native';

render() {
  return (
    
  <ImageBackground source={require('path/to/img')} style={styles.backgroundImage} >
      <View style={{flex: 1, backgroundColor: 'transparent'}} />
      <View style={{flex: 3,backgroundColor: 'transparent'}} >
  </ImageBackground>
    
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
});

วิธีที่ง่ายที่สุดในการใช้พื้นหลัง:

<ImageBackground style={styles.container} source={require('../../images/screen_login.jpg')}>
  <View style={styles.logoContainer}>
    <Image style={styles.logo}
      source={require('../../images/logo.png')}
    />
  </View> 
  <View style={styles.containerTextInput}>
    < LoginForm />
  </View>   
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //   backgroundColor:"#0984e3"
  },
  containerTextInput: {
    marginTop: 10,
    justifyContent: 'center'
  },

  logoContainer: {
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    height: 150,
    width: 150
  }
});

สำหรับฉันมันใช้งานได้ดีฉันใช้ ImageBackground เพื่อตั้งค่าภาพพื้นหลัง:

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, ImageBackground } from 'react-native';
const App: () => React$Node = () => {
return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}> 
      <ImageBackground source={require('./Assets.xcassets/AppBackGround.imageset/2x.png')} style={styles.backgroundImage}>
        <View style={styles.sectionContainer}>
              <Text style={styles.title}>Marketing at the speed of today</Text>
        </View>
      </ImageBackground>
      </View>
    </>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    height: '100%',
    width: '100%'
  },
  title:{
    color: "#9A9A9A",
    fontSize: 24,
    justifyContent: "center",
    alignItems: "center",
  },
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;

ในกรณีที่คุณยังไม่สามารถแก้ไขได้ React Native v.0.42.0 มี resizeMode

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />

import React, { Component } from 'react';
import { Image, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  }
});

คุณสามารถลองได้ที่: https://sketch.expo.io/B1EAShDie (จาก: github.com/Dorian/sketch-reactive-native-apps )

เอกสาร: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

คุณยังสามารถใช้ภาพของคุณเป็นที่เก็บ:

render() {
    return (
        <Image
            source={require('./images/background.png')}
            style={styles.container}>
            <Text>
              This text will be on top of the image
            </Text>
        </Image>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: undefined,
        height: undefined,
        justifyContent: 'center',
        alignItems: 'center',
      },
});

ฉันเคยได้ยินว่าต้องใช้ BackgroundImage เพราะในอนาคตคุณควรจะไม่สามารถซ้อนแท็กรูปภาพได้ แต่ฉันไม่สามารถรับ BackgroudImage เพื่อแสดงพื้นหลังของฉันอย่างถูกต้อง สิ่งที่ฉันทำคือซ้อนภาพไว้ในแท็กมุมมองและสไตล์ทั้งมุมมองด้านนอกรวมถึงรูปภาพ คีย์ถูกตั้งค่าความกว้างเป็นโมฆะและตั้งค่า resizeMode เป็น 'stretch' ด้านล่างเป็นรหัสของฉัน:

import React, {Component} from 'react';
import { View, Text, StyleSheet, Image} from 'react-native';

export default class BasicImage extends Component {
	constructor(props) {
	  super(props);

	  this.state = {};
	}

	render() {
		return (
			<View style={styles.container}>
	      <Image 
	        source={this.props.source}
	        style={styles.backgroundImage}
	      />
      </View>
		)
	}
}

const styles = StyleSheet.create({   
		container: {
			flex: 1,
			width: null,
			height: null,
			marginBottom: 50
		},
    text: {
    		marginLeft: 5,
    		marginTop: 22,
    		fontFamily: 'fontawesome',
        color: 'black',
        fontSize: 25,
        backgroundColor: 'rgba(0,0,0,0)',
    },
		backgroundImage: {
			flex: 1,
			width: null,
			height: null,
			resizeMode: 'stretch',
		}
});

ใช้<ImageBackground>เป็นแล้วกล่าวว่าโดยantoine129 ใช้<Image>กับเด็ก ๆ เลิกใช้แล้ว

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

อีกวิธีที่ง่าย:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>

ฉันแก้ไขปัญหาภาพพื้นหลังโดยใช้รหัสนี้

import React from 'react';
import { StyleSheet, Text, View,Alert,ImageBackground } from 'react-native';

import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';

class SignInScreen extends React.Component {

    state = {
       UsernameOrEmail  : '',
       Password : '',
     }
    render() {
      return (
             <ImageBackground  source={require('../assets/icons/background3.jpg')} style {styles.backgroundImage}>
              <Text>React Native App</Text>
            </ImageBackground>
          );
    }
  }


    export default SignInScreen;

    const styles = StyleSheet.create({
     backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
     }
   });

ImageBackground อาจมีข้อ จำกัด

จริงๆแล้วคุณสามารถใช้งานได้โดยตรงและไม่ได้คัดค้าน

หากคุณต้องการเพิ่มภาพพื้นหลังใน Native React และต้องการเพิ่มองค์ประกอบอื่น ๆ ในภาพพื้นหลังนั้นให้ทำตามขั้นตอนด้านล่าง:

1. สร้างมุมมองคอนเทนเนอร์
2. สร้างองค์ประกอบรูปภาพที่มีความกว้างและความสูง 100% ปรับขนาดโหมด: 'ครอบคลุม'
3. สร้างองค์ประกอบมุมมองอื่นภายใต้องค์ประกอบภาพพร้อมตำแหน่ง: 'สัมบูรณ์'

นี่คือรหัสที่ฉันใช้:

import React, { Component } from 'react';
import {Text, View, Image} from 'react-native';
import Screen from '../library/ScreenSize'

export default class MenuScreen extends Component {
    static navigationOptions = {
      header: null
    }
    render() {
        return (
          <View style={{ flex: 1 }}>
            <Image
              style={{
                resizeMode: "cover",
                width: "100%",
                height: "100%",
                justifyContent: "center",
                alignItems: "center",
                opacity: 0.4
              }}
              source={require("../assets/images/menuBackgroundImage.jpg")}
            ></Image>

            <View style={{
                width: Screen.width,
                height: Screen.height * 0.55,
                position: 'absolute',
                bottom: 0}}>
                <Text style={{
                    fontSize: 48
                }}>Glad to Meet You!</Text>
            </View>
          </View>
        );
    }
}

เพลิดเพลินกับการเข้ารหัส ....

เอาท์พุท: