이 코드를 작성하기 위해 View에 전체 화면 이미지를 추가하고 싶었습니다.
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 화면 크기를 어떻게 찾아야합니까?
Pixel Density에 액세스하는 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>답변
react-native version = 0.19.0을 사용하여 안드로이드에서 아무 소용이 없도록 이러한 답변 중 몇 가지를 시도했습니다.
어떤 이유로 스타일 시트 내의 resizeMode가 제대로 작동하지 않습니까? 그러나 sytlesheet가
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 년 3 월 업데이트 사용 이미지가 사용되지 않음 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 >답변
Braden Rockwell Napier 의 답변을 바탕 으로이 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 BackgroundImagesomeWhereInMyApp.js
import BackgroundImage from './backgroundImage'
....
<BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
<Text>Test</Text>
</BackgroundImage>답변
배경 이미지로 사용하려면 2017 년 6 월 말 v0.46 에서 도입 된 새로운 <ImageBackground>구성 요소 를 사용해야합니다 . 곧 지원 하지 않지만 중첩을 지원합니다 .<Image>
커밋 요약 은 다음과 같습니다 .
컴포넌트 내부의 중첩 뷰 지원을 제거하고 있습니다. 이 기능을 사용
intrinsinc content size하면<Image>불가능 을 지원할 수 있기 때문에이 작업을 수행
하기로했습니다. 따라서 전환 프로세스가 완료되면 이미지 크기를 명시 적으로 지정할 필요가 없으며 실제 이미지 비트 맵에서 추론 할 수 있습니다.그리고 이것은 단계 # 0입니다.
매우 간단한 스타일을 통해이 기능을 구현하는 매우 간단한 드롭 인 교체입니다. 안에 무언가를 넣고 싶다면 대신 사용하십시오.
