Каков наилучший способ добавить полноэкранное фоновое изображение в 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 для доступа к плотности пикселей, но ничего о размере экрана...

есть идеи?

118
javascript react-native

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> упаковка изображения, и это будет работать.

84

(это устарело, теперь вы можете использовать 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,
  }
};
156

Примечание: это решение является старым. Пожалуйста, обратитесь к 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>
39

я попробовал несколько из этих ответов безрезультатно для 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.покройте или содержите также.

надеюсь, что это помогает!

19

на основе Брэден Рокуэлл Нейпир ' 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>
11

если вы хотите использовать его в качестве фонового изображения, вам нужно будет использовать новый <ImageBackground> компонент введено в конце июня 2017 в v0.46. Он поддерживает вложенность в то время как <Image> в ближайшее время не будет.

здесь фиксация резюме:

мы удаляем поддержку вложенности представлений внутри компонента. Мы решили сделать это, потому что наличие этой функции делает поддержку intrinsinc content size на <Image> невозможно; поэтому, когда переход процесс завершен, не будет необходимости указывать изображение размер явно, он может быть выведен из фактического растрового изображения.

и это шаг № 0.

очень простая падени-в замене которая снабжает эта функциональность через очень простой стиль. Пожалуйста, используйте вместо того, если вы хотите что-то положить внутри.

11

О Боже, наконец, я нашел отличный способ для 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%'
}

Он отлично работает друзья ... получайте удовольствие

8

обновление марта 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 >
6

последний по состоянию на октябрь'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

4

Так как 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>

Нажмите здесь для предварительного просмотра изображения

3

вам нужно убедиться, что ваше изображение имеет resizeMode={Image.resizeMode.contain} или {Image.resizeMode.stretch} и установите ширину стиля изображения в null

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

ширина и высота со значением null не работают для меня, тогда я думал использовать верхнюю, нижнюю, левую и правую позицию, и это сработало. Пример:

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

и JSX:

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

Если вы еще не решили его, React Native V. 0.42.0 имеют resizeMode

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
1
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

1

вы также можете использовать свое изображение в качестве контейнера:

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

Я слышал о необходимости использовать 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',
		}
});
1

использовать <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,
  }
};
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'
    },
});
1

самый простой способ имплементировать фон:

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

обновление до 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

1

еще одно простое решение:

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

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

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