Cách tốt nhất để thêm hình nền toàn màn hình trong React Native

Tôi muốn thêm hình ảnh toàn màn hình vào Chế độ xem để tôi viết mã này

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

và định nghĩa phong cách là

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

Nhưng theo cách này tôi phải tìm kích thước màn hình iPhone thực tế như thế nào?

Tôi đã thấy một API để truy cập Mật độ pixel nhưng không có gì về kích thước màn hình ...

Bất kỳ ý tưởng?

Bạn có thể sử dụng flex: 1kiểu dáng trên một <Image>yếu tố để nó lấp đầy toàn bộ màn hình. Sau đó, bạn có thể sử dụng một trong các chế độ thay đổi kích thước Ảnh để hình ảnh hoàn toàn lấp đầy thành phần:

<Image source={require('image!egg')} style={styles.backgroundImage} />

Phong cách:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

Tôi khá chắc chắn rằng bạn có thể thoát khỏi việc <View>bọc hình ảnh của bạn và điều này sẽ hoạt động.

(Điều này đã bị phản đối ngay bây giờ, bạn có thể sử dụng ImageBackground )

Đây là cách tôi đã thực hiện nó. Thỏa thuận chính là loại bỏ các kích thước cố định tĩnh.

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

Lưu ý: Giải pháp này đã cũ. Vui lòng tham khảo https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting thay thế

Hãy thử giải pháp này. Nó được hỗ trợ chính thức. Tôi vừa thử nó và hoạt động hoàn hảo.

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

Và đối với việc sử dụng nó làm hình nền, chỉ cần làm như sau.

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

Tôi đã thử một vài trong số những câu trả lời này nhưng không có kết quả cho Android bằng cách sử dụng phiên bản Reac -igen = 0.19.0.

Vì một số lý do, resizeMode bên trong biểu định kiểu của tôi không hoạt động phù hợp? Tuy nhiên, khi syt Meateet có

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

và, trong thẻ Image tôi đã chỉ định resizeMode:

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

Nó hoạt động hoàn hảo! Như đã đề cập ở trên, bạn có thể sử dụng Image.resizeMode.cover hoặc chứa.

Hi vọng điêu nay co ich!

Cập nhật tháng 3 năm 2018 Sử dụng hình ảnh không được chấp nhận sử dụng 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 >

Dựa trên câu trả lời của Braden Rockwell Napier , tôi đã tạo ra thành phần nàyBackgroundImage

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>

Nếu bạn muốn sử dụng nó làm hình nền, bạn sẽ cần sử dụng <ImageBackground>thành phần mới được giới thiệu vào cuối tháng 6 năm 2017 trong v0.46. Nó hỗ trợ làm tổ trong khi <Image>sẽ không sớm.

Dưới đây là tóm tắt cam kết :

Chúng tôi đang loại bỏ hỗ trợ của các khung nhìn lồng bên trong thành phần. Chúng tôi quyết định làm điều này bởi vì có tính năng này làm cho việc hỗ trợ intrinsinc content sizelà <Image>không thể; Vì vậy, khi quá trình chuyển đổi hoàn tất, sẽ không cần chỉ định rõ ràng kích thước hình ảnh, nó có thể được suy ra từ bitmap hình ảnh thực tế.

Và đây là bước # 0.

là sự thay thế thả xuống rất đơn giản, thực hiện chức năng này thông qua kiểu dáng rất đơn giản. Xin vui lòng, sử dụng thay vì nếu bạn muốn đặt một cái gì đó bên trong.

CẬP NHẬT lên ImageBackground

Vì sử dụng <Image />như một container bị phản đối trong một thời gian, tất cả các câu trả lời thực sự bỏ lỡ điều gì đó quan trọng. Để sử dụng đúng cách chọn <ImageBackground />với style và imageStyle chống đỡ. Áp dụng tất cả các kiểu ảnh có liên quan đến imageStyle.

Ví dụ:

<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/Lologists/Image/ImageBackground.js

Ôi Chúa ơi Cuối cùng tôi cũng tìm được một cách tuyệt vời cho React-Native V 0.52-RC và bản gốc:

Thẻ nội dung của bạn phải giống như thế này: // ======================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

Và phong cách thiết yếu của bạn là: // ========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

Nó hoạt động tốt bạn bè ... vui chơi

Vì 0.14 phương thức này sẽ không hoạt động, vì vậy tôi đã xây dựng một thành phần tĩnh để làm cho nó đơn giản cho các bạn. Bạn chỉ có thể dán nó vào hoặc tham chiếu nó như là một thành phần.

Điều này nên được sử dụng lại và nó sẽ cho phép bạn thêm các kiểu và thuộc tính bổ sung như thể nó là một <Image />thành phần tiêu chuẩn

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

chỉ cần dán cái này vào và sau đó bạn có thể sử dụng nó như hình ảnh và nó phải vừa với toàn bộ kích thước của chế độ xem (vì vậy nếu là chế độ xem trên cùng, nó sẽ lấp đầy màn hình của bạn.

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

Nhấn vào đây để xem hình ảnh

Mới nhất kể từ ngày 17 tháng 10 (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/release/0.49/docs/images.html#background-image-via-nesting

Để xử lý trường hợp sử dụng này, bạn có thể sử dụng <ImageBackground>thành phần có đạo cụ tương tự <Image>và thêm bất kỳ phần tử con nào vào nó mà bạn muốn lớp trên nó.

Thí dụ:

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

Để biết thêm: ImageBackground | Phản ứng bản địa

Lưu ý rằng bạn phải chỉ định một số thuộc tính kiểu chiều rộng và chiều cao.

Bạn cần đảm bảo Hình ảnh của bạn có resizeMode = {Image.resizeMode.contain} hoặc {Image.resizeMode.stretch} và đặt độ rộng kiểu hình ảnh thành null

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

Chiều rộng và chiều cao với giá trị null không hoạt động đối với tôi, sau đó tôi nghĩ sẽ sử dụng vị trí trên cùng, dưới cùng, bên trái và bên phải và nó hoạt động. Thí dụ:

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

Và JSX:

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

(RN> = .46)

thành phần không thể chứa trẻ em nếu bạn muốn hiển thị nội dung trên đầu ảnh, xem xét sử dụng định vị tuyệt đối.

hoặc bạn có thể sử dụng 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'
    },
});

Cách dễ nhất để ẩn nền:

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

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

Đối với tôi điều này hoạt động tốt, tôi đã sử dụng ImageBackground để đặt hình nền:

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;

Trong trường hợp bạn chưa giải quyết được, React Native v.0.42.0 có 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,
  }
});

Bạn có thể dùng thử tại: https://sketch.expo.io/B1EAShDie (từ: github.com/Dorian/sketch-reactive-native-apps )

Tài liệu: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Bạn cũng có thể sử dụng hình ảnh của mình như một thùng chứa:

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

Tôi đã nghe nói về việc phải sử dụng BackgroundImage vì trong tương lai bạn phải có khả năng lồng thẻ Image. Nhưng tôi không thể để BackgroudImage hiển thị chính xác nền của mình. Những gì tôi đã làm là lồng hình ảnh của mình vào trong thẻ View và tạo kiểu cho cả View bên ngoài cũng như hình ảnh. Các khóa được đặt chiều rộng thành null và đặt resizeMode thành 'căng'. Dưới đây là mã của tôi:

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

Sử dụng <ImageBackground>như đã nói bởi antoine129 . Sử dụng <Image>với trẻ em bây giờ không được dùng nữa.

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

Một giải pháp dễ dàng khác:

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

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

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

Tôi đã giải quyết vấn đề hình ảnh nền của tôi bằng cách sử dụng mã này.

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 có thể có giới hạn

Trên thực tế, bạn có thể sử dụng trực tiếp và nó không bị phản đối.

Nếu bạn muốn thêm Ảnh nền trong React Native và cũng muốn thêm các yếu tố khác vào Ảnh nền đó, hãy làm theo bước dưới đây:

1. Tạo chế độ xem Container
2. Tạo một yếu tố hình ảnh với chiều rộng và chiều cao 100%. Đồng thời thay đổi kích thướcMode: 'Cover'
3. Tạo một phần tử View khác trong phần tử Image với vị trí: 'tuyệt đối'

Đây là mã tôi sử dụng:

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

Thưởng thức mã hóa ....

Đầu ra: