Ich wollte der Ansicht ein Vollbild hinzufügen, damit ich diesen Code schreibe
return (
<View style={styles.container}>
<Image source={require('image!Egg')} style={styles.backgroundImage}>
</View>
)
und definiert den Stil als
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column',
},
backgroundImage:{
width:320,
height:480,
}
...
aber wie soll ich auf diese Weise die tatsächliche iPhone-Bildschirmgröße finden?
Ich habe eine API für den Zugriff auf die Pixeldichte gesehen, aber nichts über die Bildschirmgröße.
Irgendeine Idee?
Sie können das flex: 1
-Styling für ein <Image>
-Element verwenden, damit es den gesamten Bildschirm ausfüllt. Sie können dann einen der Modi für die Bildgröße verwenden, damit das Bild das Element vollständig ausfüllt:
<Image source={require('image!Egg')} style={styles.backgroundImage} />
Stil:
import React from 'react-native';
let { StyleSheet } = React;
let styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
}
});
Ich bin mir ziemlich sicher, dass Sie die <View>
-Umhüllung Ihres Bildes loswerden können, und dies wird funktionieren.
(Dies ist veraltet, jetzt können Sie ImageBackground verwenden.)
So habe ich es gemacht. Das Hauptabkommen bestand darin, die statischen festen Größen zu beseitigen.
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,
}
};
Hinweis: Diese Lösung ist alt. Bitte beachten Siehttps://facebook.github.io/react-native/docs/images.html#background-image-via-nesting stattdessen
Versuchen Sie diese Lösung. Es wird offiziell unterstützt. Ich habe es gerade getestet und funktioniert einwandfrei.
var styles = StyleSheet.create({
backgroundImage: {
flex: 1,
alignSelf: 'stretch',
width: null,
}
});
Gehen Sie wie folgt vor, um es als Hintergrundbild zu verwenden.
<Image style={styles.backgroundImage}>
<View>
<Text>All your stuff</Text>
</View>
</Image>
Ich habe mehrere dieser Antworten mit Android ohne Reaktiverprobung = 0.19.0 ausprobiert.
Aus irgendeinem Grund funktionierte der resizeMode in meinem Stylesheet nicht ordnungsgemäß? Als Sytlesheet jedoch hatte
backgroundImage: {
flex: 1,
width: null,
height: null,
}
und innerhalb des Image-Tags habe ich den resizeMode angegeben:
<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>
Es hat perfekt funktioniert! Wie oben erwähnt, können Sie Image.resizeMode.cover verwenden oder auch.
Hoffe das hilft!
Basierend auf Braden Rockwell Napier 's answer habe ich diese BackgroundImage
-Komponente erstellt
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>
Wenn Sie es als Hintergrundbild verwenden möchten, müssen Sie die neue <ImageBackground>
-Komponente verwenden, die Ende Juni 2017 eingeführt wurde in Version 0.46. Es unterstützt die Verschachtelung, während <Image>
bald nicht mehr funktioniert.
Hier ist die commit - Zusammenfassung:
Wir entfernen die Unterstützung für das Schachteln von Ansichten innerhalb der Komponente. Wir haben uns dafür entschieden, weil diese Funktion durch die Unterstützung von
intrinsinc content size
des<Image>
unmöglich; also wenn der Wenn der Übergangsprozess abgeschlossen ist, müssen Sie nicht das Bild angeben Größe explizit, kann aus der aktuellen Bild-Bitmap abgeleitet werden.Und das ist der Schritt # 0.
ist ein sehr einfacher Drop-In-Ersatz, der .__ implementiert. diese Funktionalität durch sehr einfaches Styling. Benutzen Sie bitte anstatt, wenn Sie etwas setzen wollen Innerhalb.
Oh Gott Endlich finde ich einen guten Weg für React-Native V 0.52-RC und Native-Base:
Ihr Content-Tag sollte ungefähr so aussehen: // ===================================== ============================
<Content contentContainerStyle={styles.container}>
<ImageBackground
source={require('./../assets/img/back.jpg')}
style={styles.backgroundImage}>
<Text>
Some text here ...
</Text>
</ImageBackground>
</Content>
Und Ihr wesentlicher Stil ist: // ======================================= =========================
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
backgroundImage:{
flex : 1,
width : '100%'
}
Es funktioniert gut Freunde ... viel Spaß
<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 >
UPDATE zu ImageBackground
Da die Verwendung von <Image />
als Container für eine gewisse Zeit veraltet ist, fehlt allen Antworten tatsächlich etwas Wichtiges. Zur korrekten Verwendung wählen Sie <ImageBackground />
mit style
undimageStyle
prop. Wenden Sie alle für Image relevanten Stile auf imageStyle
an.
Zum Beispiel:
<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
Späteste Okt. 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
Seit 0.14 funktioniert diese Methode nicht, daher habe ich eine statische Komponente erstellt, die dies für Sie einfach macht. Sie können dies einfach einfügen oder als Komponente referenzieren.
Dies sollte wiederverwendbar sein und Sie können zusätzliche Stile und Eigenschaften hinzufügen, wenn es sich um eine <Image />
-Standardkomponente handelt
const BackgroundImage = ({ source, children, style, ...props }) => {
return (
<Image
source={source}
style={{flex: 1, width: null, height: null, ...style}}
{...props}>
{children}
</Image>
);
}
fügen Sie einfach dieses ein und dann können Sie es wie ein Bild verwenden. Es sollte sich auf die gesamte Größe der Ansicht beziehen, in der es sich befindet (wenn es also die Draufsicht ist, füllt es Ihren Bildschirm.
<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
<Scene styles={styles} {...store} />
</BackgroundImage>
Sie müssen sicherstellen, dass Ihr Image über resizeMode = {Image.resizeMode.contain} oder {Image.resizeMode.stretch} verfügt und die Breite des Bildstils auf null setzt
<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>
Verwenden Sie <ImageBackground>
wie bereits von antoine129 . Die Verwendung von <Image>
mit Kindern ist jetzt veraltet.
class AwesomeClass extends React.Component {
render() {
return (
<ImageBackground source={require('image!background')} style={styles.container}>
<YourAwesomeComponent/>
</ImageBackground>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
}
};
import { ImageBackground } from "react-native";
<ImageBackground
style={{width: '100%', height: '100%'}}
source={require('../assets/backgroundLogin.jpg ')}> //path here inside
<Text>React</Text>
</ImageBackground>
Die Breite und Höhe mit dem Wert null funktionieren für mich nicht, dann dachte ich, die Position oben, unten, links und rechts zu verwenden, und es hat funktioniert.
bg: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
resizeMode: 'stretch',
},
Und der JSX:
<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
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,
}
});
Sie können es unter: https://sketch.expo.io/B1EAShDie (von: github.com/Dorian/sketch-reactive-native-apps ) versuchen
Dokumente: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
Sie können Ihr Bild auch als Container verwenden:
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',
},
});
falls Sie es noch nicht gelöst haben, haben React Native v.0.42.0 resizeMode
<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
(RN> = .46)
die Komponente darf keine untergeordneten Elemente enthalten, wenn Sie den Inhalt über dem Bild darstellen möchten.
oder Sie könnenImageBackgroundverwenden.
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'
},
});
Einfachste Möglichkeit, Hintergrund zu implementieren:
<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
}
});
Ich habe gehört, BackgroundImage verwenden zu müssen, weil Sie das Image-Tag in der Zukunft nicht verschachteln können. Aber ich konnte BackgroudImage nicht dazu bringen, meinen Hintergrund richtig anzuzeigen. Was ich tat, war mein Bild in einem View-Tag zu verschachteln und sowohl die äußere Ansicht als auch das Bild zu gestalten. Mit den Schlüsseln wurde width auf null und resizeMode auf 'stretch' gesetzt. Unten ist mein Code:
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',
}
});
Ich habe das Problem mit dem Hintergrundbild mit diesem Code behoben.
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'
}
});
Eine weitere einfache Lösung:
<Image source={require('../assets/background.png')}
style={{position: 'absolute', zIndex: -1}}/>
<View style={{flex: 1, position: 'absolute'}}>
{/*rest of your content*/}
</View>