Каков наилучший способ добавить полноэкранное фоновое изображение в 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 для доступа к плотности пикселей, но ничего о размере экрана...
есть идеи?
21 ответов
можно использовать 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, используя react-native version = 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.покройте или содержите также.
надеюсь, что это помогает!
на основе Брэден Рокуэлл Нейпир ' s ответ, Я сделал это 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>
компонент введено в конце июня 2017 в v0.46. Он поддерживает вложенность в то время как <Image>
в ближайшее время не будет.
здесь фиксация резюме:
мы удаляем поддержку вложенности представлений внутри компонента. Мы решили сделать это, потому что наличие этой функции делает поддержку
intrinsinc content size
на<Image>
невозможно; поэтому, когда переход процесс завершен, не будет необходимости указывать изображение размер явно, он может быть выведен из фактического растрового изображения.и это шаг № 0.
очень простая падени-в замене которая снабжает эта функциональность через очень простой стиль. Пожалуйста, используйте вместо того, если вы хотите что-то положить внутри.
О Боже, наконец, я нашел отличный способ для 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%'
}
Он отлично работает друзья ... получайте удовольствие
обновление марта 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 >
последний по состоянию на октябрь'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
Так как 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>
вам нужно убедиться, что ваше изображение имеет 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'}} />
Если вы еще не решили его, 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 (from: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 правильно отобразить мой фон. То, что я сделал, это вложить мое изображение в тег вида и стиль как внешнего вида, так и изображения. Клавиши устанавливали ширину в null, а 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>
Как уже сказал Антуан 129. Используя <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,
}
};
(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
С помощью <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
еще одно простое решение:
<Image source={require('../assets/background.png')}
style={{position: 'absolute', zIndex: -1}}/>
<View style={{flex: 1, position: 'absolute'}}>
{/*rest of your content*/}
</View>