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 gęstości pikseli, ale nic o rozmiarze ekranu...
Jakiś pomysł?28 answers
Możesz użyć stylizacji flex: 1
na elemencie <Image>
, aby wypełnił on 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} />
Style:
import React from 'react-native';
let { StyleSheet } = React;
let styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
}
});
Jestem pewien, że możesz pozbyć się zawijania Twojego obrazu i to zadziała.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-20 01:11:19
(Teraz możesz użyć ImageBackground)
Tak to zrobiłem. Głównym celem 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,
}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-07 16:53:35
Uwaga: To rozwiązanie jest stare. Prosimy o zapoznanie się z https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting zamiast
Spróbuj tego rozwiązania. Jest oficjalnie wspierany. Właśnie go 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-15 09:55:46
Wypróbowałem kilka z tych odpowiedzi na Androida, używając React-native version = 0.19.0.
Z jakiegoś powodu zmiana rozmiaru w moim arkuszu stylów nie działała prawidłowo? Jednak, gdy sytlesheet miał
backgroundImage: {
flex: 1,
width: null,
height: null,
}
I, w znaczniku obrazka podał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ć obrazu.resizeMode.pokrywa lub zawiera również.
Mam nadzieję, że to pomoże!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-26 00:04:46
Aktualizacja marzec 2018 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 >
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-06 23:21:02
Na podstawie Braden Rockwell Napier ' s odpowiedź, zrobiłem ten BackgroundImage
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
gdzieś tam.js
import BackgroundImage from './backgroundImage'
....
<BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
<Text>Test</Text>
</BackgroundImage>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:32
Aktualizacja do ImageBackground
Ponieważ używanie <Image />
jako kontenera jest przez jakiś czas przestarzałe, wszystkie odpowiedzi pomijają coś ważnego. Do prawidłowego użycia wybierz <ImageBackground />
z style
Oraz imageStyle
rekwizyt. Zastosuj wszystkie style istotne dla obrazu 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-11 07:46:07
Jeśli chcesz użyć go jako obrazu tła, musisz użyć nowego komponentu <ImageBackground>
wprowadzonego pod koniec czerwca 2017 r. w wersji 0.46. Obsługuje zagnieżdżanie, podczas gdy <Image>
wkrótce nie będzie.
Oto commit podsumowanie:
Usuwamy obsługę widoków zagnieżdżania wewnątrz komponentu. Postanowiliśmy to zrobić, ponieważ posiadanie tej funkcji sprawia, że obsługa
intrinsinc content size
of<Image>
impossible; więc kiedy proces przejścia jest zakończony, nie będzie potrzeby określ obrazek rozmiar jawnie, można wywnioskować z rzeczywistej bitmapy obrazu.A to jest krok # 0.
Jest bardzo prostym zamiennikiem drop-in, który wdraża ta funkcjonalność dzięki bardzo prostej stylizacji. Proszę, użyj zamiast, jeśli chcesz umieścić coś do środka.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-06 04:16:57
O Boże w końcu znalazłem świetny sposób na React-Native V 0.52-RC i native-base:
Twój tag treści powinien być podobny do tego: //==============================================================
<Content contentContainerStyle={styles.container}>
<ImageBackground
source={require('./../assets/img/back.jpg')}
style={styles.backgroundImage}>
<Text>
Some text here ...
</Text>
</ImageBackground>
</Content>
A twoim podstawowym stylem jest : //==============================================================
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
backgroundImage:{
flex : 1,
width : '100%'
}
To działa dobrze przyjaciele ... baw się dobrzeWarning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-10 13:21:52
import { ImageBackground } from "react-native";
<ImageBackground
style={{width: '100%', height: '100%'}}
source={require('../assets/backgroundLogin.jpg ')}> //path here inside
<Text>React</Text>
</ImageBackground>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-25 21:30:07
Od 0.14 ta metoda nie zadziała, więc zbudowałem statyczny komponent, który ułatwi wam to. Możesz to po prostu wkleić lub odwołać się do niego jako komponentu.
Powinno to być możliwe do ponownego użycia i pozwoli Ci na dodanie dodatkowych stylów i właściwości tak, jak gdyby był to standardowy komponent <Image />
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 obraz i powinien pasować do całego rozmiaru widoku, w którym jest (więc jeśli jest to widok z góry, wypełni twój ekran.
<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
<Scene styles={styles} {...store} />
</BackgroundImage>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-06 20:23:56
Najnowsze od października'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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-11 05:30:39
Dla mnie to działa dobrze, użyłem ImageBackground ustawić obraz 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;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-03-29 17:26:45
Aby obsłużyć ten przypadek użycia, możesz użyć komponentu <ImageBackground>
, który ma te same właściwości co <Image>
, i dodać do niego dowolne dzieci, które chcesz umieścić na nim.
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 width i height.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-20 11:56:00
Musisz upewnić się, że Twój obraz ma resizeMode={Obraz.resizeMode.contain} lub {Image.resizeMode.rozciągnij} i ustaw szerokość stylu obrazu na null
<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 19:46:16
Szerokość i wysokość z wartością null nie działa dla mnie, wtedy pomyślałem, aby użyć górnej, dolnej, lewej i prawej pozycji i to działa. Przykład:
bg: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
resizeMode: 'stretch',
},
I JSX:
<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-16 15:28:27
(RN>=.46)
Komponent nie może zawierać dzieci jeśli chcesz renderować zawartość na wierzchu 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'
},
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-25 10:20:16
Najprostszy sposób implementacji 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
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-31 06:39:19
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'
},
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-28 08:22:28
Jeśli jeszcze go nie rozwiązałeś, React Native V.0.42. 0 mA resizeMode
<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-10 04:24:59
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 spróbować pod adresem: https://sketch.expo.io/B1EAShDie (od: github.com/Dorian/sketch-reactive-native-apps )
Docs: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-16 06:54:32
Możesz również 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',
},
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-12 19:19:09
Słyszałem o konieczności używania BackgroundImage, ponieważ w przyszłości nie będziesz mógł zagnieżdżać znacznika obrazu. Ale nie mogłem uzyskać BackgroudImage, aby poprawnie wyświetlić moje tło. To, co zrobiłem, to zagnieżdżenie mojego obrazu wewnątrz znacznika widoku i styl zarówno widoku zewnętrznego, jak i obrazu. Klawisze ustawiały szerokość na null, a 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',
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-01 19:40:00
Użyj {[1] } 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,
}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-08 07:11:03
Jeśli chcesz dodać obraz tła, możesz to zrobić używając, ale najpierw musisz zaimportować go z 'React-native' w następujący sposób:
import {ImageBackground} from 'react-native';
Wtedy:
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%',
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-29 08:59:29
Inne proste rozwiązanie:
<Image source={require('../assets/background.png')}
style={{position: 'absolute', zIndex: -1}}/>
<View style={{flex: 1, position: 'absolute'}}>
{/*rest of your content*/}
</View>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-23 02:11:35
Rozwiązałem problem z obrazem tła używając 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'
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-18 10:41:30
ImageBackground może mieć limit
W rzeczywistości można używać bezpośrednio i nie jest przestarzały.
Jeśli chcesz dodać obraz tła w React Native, a także inne elementy na tym obrazie tła, wykonaj poniższy Krok:
- Tworzenie widoku kontenera
- Utwórz element obrazu o 100% szerokości i wysokości. Również resizeMode:'Cover'
- Utwórz inny element widoku pod elementem obrazu o pozycji: "absolute"
To jest 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....
Wyjście:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55