React Native'e tam ekran arka plan görüntüsü eklemenin en iyi yolu nedir?

Görünüme tam ekran bir resim eklemek istedim, bu yüzden bu kodu yazıyorum

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

ve stili şöyle tanımladı

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

ama bu şekilde gerçek iPhone ekran boyutunu nasıl bulabilirim?

Piksel Yoğunluğuna erişmek için bir API gördüm, ancak ekran boyutuyla ilgili hiçbir şey yok ...

Herhangi bir fikir?

Tüm ekranı flex: 1kaplaması için bir <Image>öğenin stilini kullanabilirsiniz . Ardından, görüntünün öğeyi tamamen doldurmasını sağlamak için Görüntü yeniden boyutlandırma modlarından birini kullanabilirsiniz:

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

Tarz:

import React from 'react-native';

let { StyleSheet } = React;

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

<View>Resminizi sarmadan kurtulabileceğinizden oldukça eminim ve bu işe yarayacaktır.

(Bu kullanımdan kaldırılmıştır artık ImageBackground'u kullanabilirsiniz )

Ben böyle yaptım. Ana anlaşma statik sabit boyutlardan kurtulmaktı.

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,
  }
};

Not: Bu çözüm eskidir. Lütfen bunun yerine https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting adresine bakın

Bu çözümü deneyin. Resmi olarak desteklenmektedir. Sadece test ettim ve kusursuz çalışıyor.

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

Ve bunu Arka Plan görüntüsü olarak kullanmaya gelince, sadece aşağıdakileri yapın.

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

React-native version = 0.19.0 kullanarak bu cevaplardan birkaçını android için boşuna denedim.

Bazı nedenlerden dolayı, stil sayfamın içindeki resizeMode düzgün çalışmadı mı? Bununla birlikte, sytlesheet'te

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

ve Resim etiketinde resizeMode'u belirttim:

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

Mükemmel çalıştı! Yukarıda belirtildiği gibi, Image.resizeMode.cover'ı kullanabilir veya include'i de kullanabilirsiniz.

Bu yardımcı olur umarım!

Mart 2018 Güncellemesi Görüntü kullanımı kullanımdan kaldırıldı ImageBackground kullanın

  <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 >

Dayanarak Braden Rockwell Napier bireyin cevap , bu yapılanBackgroundImage bileşeni

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>

Arka plan resmi olarak kullanmak istiyorsanız , Haziran 2017 sonunda v0.46'da tanıtılan yeni <ImageBackground>bileşeni kullanmanız gerekecektir. Yerleştirmeyi destekler<Image>Yakında .

İşte taahhüt özeti:

Bileşenin içindeki yuvalama görünümleri desteğini kaldırıyoruz. Bunu yapmaya karar verdik çünkü bu özelliğe sahip intrinsinc content sizeolmak,<Image> imkansız; bu nedenle, geçiş işlemi tamamlandığında, görüntü boyutunu açıkça belirtmeye gerek kalmayacaktır, gerçek görüntü bitmapinden çıkarılabilir.

Ve bu 0 numaralı adımdır.

bu işlevselliği çok basit bir stil ile uygulayan çok basit bir drop-in değişimidir. Lütfen içine bir şey koymak istiyorsanız bunun yerine kullanın.

ImageBackground'a GÜNCELLE

<Image />Kapsayıcı olarak kullanmak bir süre kullanımdan kaldırıldığından, tüm yanıtlar aslında önemli bir şeyi gözden kaçırır. Doğru kullanım <ImageBackground />için style ve imageStyle destek ile seçin . Görüntüyle ilgili tüm stilleri şuraya uygula:imageStyle .

Örneğin:

<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

Oh Tanrım Nihayet React-Native V 0.52-RC ve native-base için harika bir yol buldum:

İçerik Etiketiniz aşağıdaki gibi olmalıdır: // ======================================= =======================

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

Ve temel stiliniz: // ======================================== ====================

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

İyi çalışıyor arkadaşlar ... iyi eğlenceler

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

0.14'ten beri bu yöntem işe yaramayacak, bu yüzden bunu sizin için kolaylaştıracak statik bir bileşen oluşturdum. Bunu yapıştırabilir veya bir bileşen olarak referans verebilirsiniz.

Bu yeniden kullanılabilir olmalı ve standart bir olduğu gibi-eğer ek stilleri ve özellikleri eklemek sağlayacak <Image />bileşeni

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

sadece bunu yapıştırın ve sonra onu resim gibi kullanabilirsiniz ve içinde bulunduğu görünümün tüm boyutuna sığması gerekir (bu nedenle, üst görünümse, ekranınızı dolduracaktır.

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

Önizleme Resmi için burayı tıklayın

Ekim'17 itibarıyla en son (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

Benim için bu iyi çalışıyor, arka plan resmini ayarlamak için ImageBackground kullandım:

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;

Bu kullanım örneğini ele almak için <ImageBackground>, aynı aksesuarlara sahip olan bileşeni kullanabilir ve <Image>üzerine katmanlamak istediğiniz alt öğeleri ekleyebilirsiniz.

Misal:

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

Daha fazlası için: ImageBackground | React Native

Bazı genişlik ve yükseklik stili niteliklerini belirtmeniz gerektiğini unutmayın.

ResizeMode = {Image.resizeMode.contain} veya {Image.resizeMode.stretch} görüntünüzün olduğundan emin olmanız ve görüntü stili genişliğini null olarak ayarlamanız gerekir

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

Null değerine sahip genişlik ve yükseklik benim için çalışmıyor, sonra üst, alt, sol ve sağ konumu kullanmayı düşündüm ve işe yaradı. Misal:

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

Ve JSX:

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

(RN> = 0,46)

İçeriği görüntünün üstünde oluşturmak istiyorsanız bileşen alt öğeleri içeremez, mutlak konumlandırma kullanmayı düşünün.

veya ImageBackground'u kullanabilirsiniz

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'
    },
});

Arka planı uygulamaya koymanın en kolay yolu:

<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
  }
});

Henüz çözmediyseniz, React Native v.0.42.0 resizeMode'a sahip

<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,
  }
});

Şu adresten deneyebilirsiniz: https://sketch.expo.io/B1EAShDie (from: github.com/Dorian/sketch-reactive-native-apps )

Dokümanlar: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Resminizi bir kap olarak da kullanabilirsiniz:

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'ı kullanmak zorunda olduğumu duydum, çünkü gelecekte Resim etiketini iç içe geçiremeyeceksiniz. Ancak BackgroudImage'ın arka planımı düzgün bir şekilde görüntülemesini sağlayamadım. Yaptığım şey, Resmimi bir Görünüm etiketinin içine yerleştirmek ve hem dış Görünüme hem de görüntünün stilini belirlemekti. Anahtarlar, genişliği null olarak ayarlıyordu ve resizeMode'u "uzat" olarak ayarlıyordu. Kodum aşağıdadır:

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',
		}
});

Antoine129<ImageBackground> tarafından daha önce söylendiği gibi kullanın . Çocuklarla kullanmak artık kullanımdan kaldırılmıştır.<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,
  }
};

Bir arka plan görüntüsü eklemek istiyorsanız, bunu kullanarak yapabilirsiniz, ancak önce bunu 'react-native' içinden aşağıdaki gibi içe aktarmanız gerekir:

import {ImageBackground} from 'react-native';

sonra:

    export default function App() {
    
    return (
        <View style={styles.body}>

            <ImageBackground source={require('./path/to/yourimage')} style={styles.backgroungImage}>
                <View style={styles.container}>Hello world!
                </View>
            </ImageBackground>
        </View>
    );
}

    const styles = StyleSheet.create({
    backgroungImage: {
    flex: 1,
    maxWidth: '100%',
  }
});

Başka bir kolay çözüm:

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

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

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

Bu kodu kullanarak arka plan resmi sorunumu çözdüm.

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'un sınırı olabilir

Aslında doğrudan kullanabilirsiniz ve kullanımdan kaldırılmamıştır.

React Native'de Arkaplan Resmi eklemek ve aynı zamanda bu Arka Plan Resmine başka öğeler eklemek istiyorsanız aşağıdaki adımı izleyin:

1. Kapsayıcı Görünümü Oluşturun
2. % 100 genişlik ve yüksekliğe sahip bir Görüntü öğesi oluşturun. Ayrıca resizeMode: 'Cover'
3. Görüntü öğesi altında şu konumla başka bir View öğesi oluşturun: 'mutlak

Kullandığım kod bu:

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>
        );
    }
}

Kodlamanın Keyfini Çıkarın ...

Çıktı: