Jaki jest najlepszy sposób na dodanie pełnoekranowego obrazu tła w React Native

Chciałem dodać obraz pełnoekranowy do widoku, więc piszę ten kod

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

i zdefiniował styl jako

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

ale w ten sposób jak mam znaleźć rzeczywisty rozmiar ekranu iPhone'a?

Widziałem API, aby uzyskać dostęp do Pixel Density, ale nic o rozmiarze ekranu ...

Dowolny pomysł?

Możesz użyć flex: 1stylizacji na <Image>elemencie, aby wypełnił cały ekran. Następnie możesz użyć jednego z trybów zmiany rozmiaru obrazu, aby obraz całkowicie wypełnił element:

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

Styl:

import React from 'react-native';

let { StyleSheet } = React;

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

Jestem prawie pewien, że możesz pozbyć się <View>zawijania obrazu i to zadziała.

(To zostało wycofane, teraz możesz używać ImageBackground )

Tak to zrobiłem. Główną sprawą było pozbycie się statycznych stałych rozmiarów.

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

Uwaga: to rozwiązanie jest stare. Zamiast tego zapoznaj się z https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Wypróbuj to rozwiązanie. Jest oficjalnie obsługiwany. Właśnie to przetestowałem i działa bez zarzutu.

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

A jeśli chodzi o używanie go jako obrazu tła, wykonaj następujące czynności.

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

Wypróbowałem kilka z tych odpowiedzi, ale bezskutecznie dla Androida przy użyciu wersji natywnej reagowania = 0.19.0.

Z jakiegoś powodu funkcja resizeMode w moim arkuszu stylów nie działała prawidłowo? Jednak gdy sytlesheet miał

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

i w tagu Image określiłem resizeMode:

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

Zadziałało idealnie! Jak wspomniano powyżej, możesz użyć Image.resizeMode.cover lub również zawierać.

Mam nadzieję że to pomoże!

Aktualizacja z marca 2018 r. Używanie obrazu jest przestarzałe. Użyj 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 >

Na podstawie Braden Rockwell Napier „s odpowiedź , zrobiłem toBackgroundImage składnik

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>

Jeśli chcesz użyć go jako obrazu tła, musisz użyć nowego <ImageBackground>komponentu wprowadzonego pod koniec czerwca 2017 w wersji 0.46. Obsługuje zagnieżdżanie, ale <Image>wkrótce nie będzie.

Oto podsumowanie zmian :

Usuwamy obsługę widoków zagnieżdżenia w komponencie. Zdecydowaliśmy się to zrobić, ponieważ posiadanie tej funkcji sprawia, że ​​wspieranie intrinsinc content sizejest <Image>niemożliwe; więc po zakończeniu procesu przejścia nie będzie potrzeby jawnego określania rozmiaru obrazu, można to wywnioskować z rzeczywistej mapy bitowej obrazu.

I to jest krok # 0.

jest bardzo prostym zamiennikiem typu drop-in, który implementuje tę funkcjonalność poprzez bardzo prostą stylizację. Proszę, użyj zamiast, jeśli chcesz coś włożyć.

UPDATE to ImageBackground

Ponieważ używanie <Image />jako kontenera jest przez pewien czas przestarzałe, we wszystkich odpowiedziach w rzeczywistości brakuje czegoś ważnego. Do właściwego użytku wybierz <ImageBackground />z style i imageStyle podpórkę. Zastosuj wszystkie style związane z obrazem do imageStyle.

Na przykład:

<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

O Boże Wreszcie znalazłem świetny sposób na React-Native V 0.52-RC i native-base:

Twój tag treści powinien wyglądać mniej więcej tak: // ======================================= =======================

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

A Twój podstawowy styl to: // ========================================== ====================

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

Świetnie działa przyjaciele ... baw się dobrze

Od wersji 0.14 ta metoda nie zadziała, więc zbudowałem statyczny komponent, który ułatwi wam zadanie. Możesz po prostu wkleić to lub utworzyć odniesienie jako komponent.

Powinno to nadawać się do ponownego wykorzystania i pozwoli na dodanie dodatkowych stylów i właściwości, tak jakby był to standardowy <Image />komponent

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

po prostu wklej to, a następnie możesz użyć go jak obrazu i powinien pasować do całego rozmiaru widoku, w którym się znajduje (więc jeśli jest to widok z góry, wypełni on ekran.

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

Kliknij tutaj, aby wyświetlić podgląd obrazu

Najnowsze na październik 2017 r. (RN> = 0,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

Aby obsłużyć ten przypadek użycia, możesz użyć <ImageBackground>komponentu, który ma takie same właściwości jak<Image> i dodać do niego wszystkie elementy podrzędne, które chcesz nałożyć na niego.

Przykład:

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

Więcej: ImageBackground | React Native

Zauważ, że musisz określić pewne atrybuty stylu szerokości i wysokości.

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

Musisz upewnić się, że obraz ma resizeMode = {Image.resizeMode.contain} lub {Image.resizeMode.stretch} i ustawić szerokość stylu obrazu na null

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

Szerokość i wysokość z wartością null nie działają dla mnie, wtedy pomyślałem, że użyję górnej, dolnej, lewej i prawej pozycji i zadziałało. Przykład:

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

Oraz JSX:

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

(RN> = 0,46)

komponent nie może zawierać elementów potomnych, jeśli chcesz renderować zawartość na górze obrazu, rozważ użycie pozycjonowania bezwzględnego.

lub możesz użyć 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'
    },
});

Najłatwiejszy sposób na wdrożenie tła:

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

U mnie to działa dobrze, użyłem ImageBackground do ustawienia obrazu tła:

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;

jeśli jeszcze tego nie rozwiązałeś, React Native v.0.42.0 ma 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,
  }
});

Możesz wypróbować na: https://sketch.expo.io/B1EAShDie (z: github.com/Dorian/sketch-reactive-native-apps )

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

Możesz także użyć swojego obrazu jako kontenera:

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

Słyszałem, że muszę używać BackgroundImage, ponieważ w przyszłości nie powinno być możliwości zagnieżdżenia tagu Image. Ale nie mogłem uzyskać BackgroudImage, aby poprawnie wyświetlał moje tło. To, co zrobiłem, to zagnieżdżenie mojego obrazu w tagu Widok i stylizowanie zarówno zewnętrznego widoku, jak i obrazu. Klucze ustawiały szerokość na null i ustawiały resizeMode na „stretch”. Poniżej mój kod:

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

Użyj, <ImageBackground>jak już powiedział antoine129 . Używanie <Image>z dziećmi jest teraz przestarzałe.

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

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

Kolejne łatwe rozwiązanie:

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

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

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

Rozwiązałem problem z obrazem tła za pomocą tego kodu.

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 może mieć limit

W rzeczywistości możesz używać bezpośrednio i nie jest to przestarzałe.

Jeśli chcesz dodać obraz tła w React Native, a także chcesz dodać inne elementy do tego obrazu tła, wykonaj poniższe czynności:

1. Utwórz widok kontenera
2. Utwórz element obrazu o 100% szerokości i wysokości. Również resizeMode: „Okładka”
3. Utwórz kolejny element View w elemencie Image z pozycją: „bezwzględna”

Oto kod, którego używam:

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

Ciesz się kodowaniem ....

Wynik: