Image ( + 이미지 위에 텍스트 쓰기)

Tags
image
Column

이미지 불러오기

이미지 불러오기 (로컬, url, base64)

1) 로컬 파일 경로 읽기

<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>

2) 외부 링크로 이미지 불러오기

<Image
style={styles.tinyLogo}
source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
/>

3) base64 데이터로 불러오기

  • base64 데이터 앞에 이미지 형식에 대한 정보를 추가해주면 됨.
    • gif : data:image/gif;base64, base 64 이미지 데이터
    • png : data:image/png;base64, base 64 이미지 데이터
const encodedData = 'R0lGODlhAQABAIAAAAAA...7';
<Image source={{uri: `data:image/gif;base64,${encodedData}`}} />

<Image
  style={styles.logo}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

이미지 위에 텍스트 쓰기

  • 이미지로 꽉 채워놓고, 텍스트나 기타 오버레이 하고싶은 컴포넌트의 위치를 absolute로 설정하면 됨.
<View style={{flex:1}}>
	<Image source={...} style={{width:'100%', height:'100%'}}/>
	<Text style={{ position:'absolute' }}> 절대 위치로 두면 되지롱 </Text>

</View>