
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
원하는 이미지를 불러와서 가운데에 배치했을때
스테이터스 바의 공간만큼 이미지가 잘리더라구요
스테이터스 바의 공간을 이미지가 채우지 못하도록 이미지를 전체적으로 내리고 싶습니다.
해서 margin이나 padding 코드를 사용하려고 했더니 오류가 나더라구요
제 코드처럼 스테이터스의 공간을 배경컬러를 따로 지정했을 때 스테이터스 바 만큼 공간을 띄워서 이미지를 배치하는 방법은 없을까요?
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
export default function App() {
return (
<View style={styles.container}>
<StatusBar backgroundColor='#fff' style='auto' />
{/*안드로이드용이긴 한데 스테이터스를 제대로 볼 수 있게 하고 싶었어요*/}
<Image
source={{uri:'https://pbs.twimg.com/media/FgX_lRdVsAA0y0E?format=jpg&name=large'}}
// 리핏이나 리사징은 따로 안하고 이미지 크기 그대로 화면에 꽉 차게 하고 싶었습니다
style={styles.imageStyle}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
//justifyContent와 alignContent를 사용하면서 공간을 줘야 할까요?
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});
