programing

반응 네이티브에서 전체 화면 배경 이미지를 추가하는 가장 좋은 방법은 무엇입니까?

closeapi 2023. 10. 8. 09:52
반응형

반응 네이티브에서 전체 화면 배경 이미지를 추가하는 가장 좋은 방법은 무엇입니까?

보기에 전체 화면 이미지를 추가하여 이 코드를 작성합니다.

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

그런데 이런 식으로 아이폰 화면의 실제 크기를 어떻게 찾아야 할까요?

픽셀 밀도에 접근할 수 있는 API를 봤지만 화면 크기에 대해서는 아무것도...

감 잡히는 게 없어요?

(이제 이미지 배경을 사용할 수 있습니다.)

저는 이렇게 해왔습니다.주요 거래는 고정된 크기를 제거하는 것이었습니다.

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

합니다.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>이미지를 포장하면 됩니다.

참고: 이 솔루션은 오래되었습니다. 대신 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>

이미지를 사용하는 2018년 3월 업데이트 이미지 배경을 사용하여 더 이상 사용하지 않습니다.

  <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 >

반응 native 버전 = 0.19.0을 사용하여 안드로이드용으로 몇 가지 답변을 시도했지만 소용이 없었습니다.

어떤 이유에서인지 크기가내 스타일시트 안의 모드가 제대로 작동하지 않았나요?하지만, 시슬시트가

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

이미지 태그 내에 크기를 지정했습니다.모드:

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

그것은 완벽하게 작동했습니다!위에서 언급한 대로 Image.resizeMode.cover 또는 contain을 사용할 수도 있습니다.

도움이 되길 바랍니다!

이미지 배경으로 업데이트

한 이후로.<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

브래든 록웰 네이피어의 대답을 바탕으로 이것을 만들었습니다.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년 6월 말 v0.46에 도입된 컴포넌트.다음과 같은 기간 동안 nesting을 지원합니다.<Image>곧 안 됩니다.

커밋 요약은 다음과 같습니다.

구성 요소 내부의 네스팅 뷰 지원을 제거하고 있습니다.이 했습니다를 할 수 했습니다.intrinsinc content size<Image>불가능합니다. 따라서 전환 프로세스가 완료되면 이미지 크기를 명시적으로 지정할 필요가 없으며 실제 이미지 비트맵에서 유추할 수 있습니다.

그리고 이것이 #0 단계입니다.

는 매우 단순한 드롭인 교체로 매우 단순한 스타일링을 통해 이러한 기능을 구현합니다.무엇인가를 넣고 싶다면 대신에 사용해주세요.

오 신이시여 드디어 리액트 네이티브 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%'
}

좋은 친구들이 될 겁니다...즐겁게 보내세요

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

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>

미리보기 이미지를 보려면 여기를 클릭합니다.

10월 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>
);

자세한 내용:이미지 배경 | 반응 네이티브

일부 너비 및 높이 스타일 특성을 지정해야 합니다.

이미지 크기가 조정되었는지 확인해야 합니다.Mode= {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'}} />

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

배경 이미지를 추가하려면 다음과 같이 'react-native'에서 가져와야 합니다.

import {ImageBackground} from 'react-native';

다음:

    export default function App() {
    
    return (
        <View style={styles.body}>

            <ImageBackground source={require('./path/to/yourimage')} style={styles.backgroungImage}>
                <View style={styles.container}>Hello world!
                </View>
            </ImageBackground>
        </View>
    );
}

    const styles = StyleSheet.create({
    backgroungImage: {
    flex: 1,
    maxWidth: '100%',
  }
});


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

아직 해결하지 못한 경우 리액트 네이티브 v.0.42.0에는 sizeMode가 있습니다.

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

앞으로는 이미지 태그를 네스팅할 수 없기 때문에 백그라운드 이미지를 사용해야 한다고 들었습니다.하지만 Background Image에서 배경을 제대로 표시할 수 없습니다.제가 한 일은 이미지를 보기 태그 안에 넣고 이미지뿐만 아니라 외부 보기에도 스타일을 지정하는 것이었습니다.키가 너비를 null로 설정하고 크기를 설정했습니다.모드를 '스트레치'로 바꿉니다.아래는 제 코드입니다.

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

이미지 배경에 제한이 있을 수 있습니다.

사실은 직접 사용할 수 있고 사용이 권장되지 않습니다.

반응 Native에서 배경 이미지를 추가하고 해당 배경 이미지에 다른 요소를 추가하려면 다음 단계를 수행합니다.

  1. 컨테이너 뷰 작성
  2. 너비와 높이가 100%인 이미지 요소를 만듭니다.크기 조정도모드: '커버'
  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>
        );
    }
}

코딩 즐기기...

출력:

This is the output of my code.

언급URL : https://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native

반응형

'programing' 카테고리의 다른 글

봄의 맥락에서 건강한 콩과 건강하지 않은 콩  (0) 2023.10.08
jQuery를 사용하여 링크에서 클릭을 프로그래밍적으로 트리거하는 방법은?  (0) 2023.10.08
D3.js(IE, Safari 및 chrome)로 SVG를 만든 후 SVG 파일을 저장/내보내는 방법은 무엇입니까?  (0) 2023.10.08
첫번째를 제외한 모든 'tr'을 선택합니다.  (0) 2023.10.08
Django URLs TypeError: 보기는 include()인 경우 호출 가능 또는 목록/튜플이어야 합니다.  (0) 2023.10.03

'programing'의 다른글

  • 현재글반응 네이티브에서 전체 화면 배경 이미지를 추가하는 가장 좋은 방법은 무엇입니까?

관련글

댓글

티스토리툴바