reactnative.dev/docs/imagebackground

 

ImageBackground · React Native

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the ` component, which has the same props as `, and add whatever children to it you would like to layer on top of it.

reactnative.dev

react-native에서 백그라운드 이미지를 넣어봅시다 !

rn에서는 내장함수로 ImageBackground 가 있습니다. js 같은 경우는 스타일에서 background-image: url( ~); 이렇게 주면 백그라운드 이미지가 들어가는데 rn은 

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

이런방법으로 사용해야합니다.

 

저의 같은 경우는 

<ImageBackground style={styles.imgWrapper} source={require('../assets/test.png')} >
      <Text>테스트</Text>
</ImageBackground>

이렇게 사용했습니다.

여기서 중요한점은 style을 사용해줘야 에러가 안납니다. 

감사합니다.

+ Recent posts