react 이미지 화면에 구현하기 (파일 불러와서 구현하기 / 이미지 주소로 구현하기) / 글자 자간, 글자 배경색 지정하기 / 텍스트 영역에 테두리 만들기 / imageview / text StyleSheet 모음

프로젝트 생성문

npx react-native init sample17 --template react-native-template-typescript

구현할 이미지는 scr>assets폴더에 저장해둔다.

ship.jpg 파일을 저장해두었다.

 

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";



export default function App(){


  return(
 

   <View>
       <Image
    source={{uri:'https://reactnative.dev/docs/assets/favicon.png'}}
      style={{width:100, height:100, resizeMode:'contain', opacity:0.5}}
 />  

  <Image
    source={require('./src/assets/ship.jpg')}
     style={{width:300, height:300}} />

 </View>

  )
}

실행화면

 

---

글자 배경색, 글자 위치 지정하기

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


 return(
<View>
<Text style={{backgroundColor:"#ffff00", textAlign:"center"}}>Hello</Text>
<Text style={{textAlign:"right"}}>World</Text>
</View>

  )
}


const style = StyleSheet.create({
hello:{
backgroundColor:"#ff0000"
}

})

 

 

---

글자 자간 지정하기

 

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


 return(
  
<View>
<Text style={{letterSpacing:2, fontSize:18}}>
오는 9일 진행되는 20대 대선 본투표에서 코로나19 확진자와 격리자들은 일반 유권자와 같은 방법으로 직접 투표함에 용지를 넣는 방식으로 투표를 하게 된다.
</Text>
</View>

   

  )
}

 

실행화면

자간지정 전

자간 지정 후

---

텍스트 영역에 테두리 만들기 

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


  return(
 

<View style={style.world}>
<Text>Hello</Text>
<Text>World</Text>
</View>


  )
}


const style = StyleSheet.create({

world:{
borderWidth:1,
bordercolor:'gray',
borderBottomLeftRadius:10,
borderTopRightRadius:10
}

})

실행화면