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

Будь-яка ідея?

Ви можете використовувати 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, використовуючи рідну версію реакцій = 0.19.0.

Чомусь ResizeMode всередині мого таблиця стилів не працював належним чином? Однак, коли ситлест був

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

і в тезі Image я вказав режим resizeMode:

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

Це спрацювало чудово! Як було сказано вище, ви можете також використовувати Image.resizeMode.cover або містити.

Сподіваюся, це допомагає!

Оновлення березень 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 >

На основі Брейден Rockwell Napier «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.

- це дуже проста заміна, що реалізує цю функціональність за допомогою дуже простого стилю. Будь ласка, використовуйте замість цього, якщо хочете щось помістити всередину.

ОНОВЛЕННЯ до 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

О, Боже, нарешті, я знаходжу чудовий спосіб для React-Native V 0.52-RC та рідної бази:

Ваш тег вмісту повинен бути приблизно таким: // ========================================== ========================

<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%'
}

Це прекрасно дружать ... весело провести час

Оскільки 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>

Натисніть тут, щоб переглянути попереднє зображення

Останній станом на 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

Для обробки цього випадку ви можете використовувати <ImageBackground>компонент, який має ті ж реквізити <Image>, що і реквізити , і додати до нього те, що ви хотіли б шарувати поверх нього.

Приклад:

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

Докладніше: ImageBackground | Реагуйте рідні

Зауважте, що ви повинні вказати деякі атрибути стилю ширини та висоти.

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

Потрібно переконатися, що у Вашого Зображення є resizeMode = {Image.resizeMode.contain} або {Image.resizeMode.stretch} і встановити ширину стилю зображення на нуль

<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'}} />

(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, щоб встановити фонове зображення:

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;

якщо ви цього ще не вирішили, 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 (від: 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, оскільки надалі ви не зможете вкласти тег Image. Але я не міг змусити BackgroudImage правильно відобразити своє тло. Що я зробив, я вклав своє зображення у тег View та стилював як зовнішній вигляд, так і зображення. Клавіші встановлювали ширину на нуль, а параметр resizeMode встановлював на 'розтягування'. Нижче мій код:

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>як уже було сказано antoine129 . Використання <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,
  }
};

Ще одне просте рішення:

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

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

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

Я вирішив проблему з фоновим зображенням за допомогою цього коду.

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 може мати обмеження

Власне, ви можете використовувати безпосередньо, і це не застаріло.

Якщо ви хочете додати фонове зображення у React Native, а також бажаєте додати інші елементи до цього фонового зображення, виконайте крок нижче:

1. Створіть подання контейнера
2. Створіть елемент зображення зі 100% шириною та висотою. Також resizeMode: 'Обкладинка'
3. Створіть ще один елемент перегляду під Елементом зображення з позицією: 'абсолютний'

Це код, який я використовую:

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

Насолоджуйтесь кодування ....

Вихід: