● 이번 글에서는 React Native의 기본 컴포넌트들과 간단히 style지정방법에 대해 정리해보고자 한다.
<View>
View 컴포넌트는 Javascript에서 <div> 태그와 비슷한 개념으로 다른 요소들을 감싸주는 컨테이너 역할을 하는 컴포넌트이다. 또한, 이름 그대로 화면에 View 컴포넌트는 안에 있는 요소들 보여주며, 주로 레이아웃을 구성하는데 많이 이용된다
View 컴포넌트의 특징
컨테이너 역할 : View 컴포넌트는 다른 컴포넌트들을 감싸는 컨테이너 역할을 해줌
중첩 가능 : View 컴포넌트는 여러 개 중복되어 사용할 수 있음
레이아웃 구성의 편의성 : View 컴포넌트는 Flexbox 레이아웃 시스템을 사용하여 내부 컴포넌트들의 정렬과 배치를 관리하므로 비교적 쉽게 레이아웃 디자인을 할 수 있음
모바일 렌더링 성능 최적화 : View 컴포넌트는 네이티브 뷰 시스템에 직접 매핑되므로, 웹의 div 태그보다 훨씬 효율적이고 성능이 우수하며 렌더링 성능의 최적화에 많은 도움을 준다.
View 컴포넌트의 중첩 사용가능관련 예
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
// <View>태그 중첩해서 사용해도 제대로 출력되는지 Test
<View style={styles.background}>
<View>
<Text style={styles.text}> View태그 중첨 테스트1 </Text>
<View>
<Text style={styles.text}> View태그 중첨 테스트2 </Text>
</View>
</View>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 35,
}
})
export default App;
위의 예제를 통해 <view> 태그를 중첩하여 사용해도 문제없이 출력되는 것을 알 수 있다.
<Text>
● Text 컴포넌트는 텍스트를 표시해 주는 역할의 컴포넌트로, Javascript의 <span> 태그나 <p> 태그와 유사하게 작동한다.
Text 컴포넌트의 특징
텍스트 감싸기 : Text 컴포넌트는 다른 텍스트 컴포넌트를 감쌀 수 있어, 이를 통해 복잡한 텍스트 레이아웃을 구성하거나, 다양한 스타일을 적용할 수 있다.
중첩 가능: Text 컴포넌트 내부에 다른 Text 컴포넌트를 중첩하여, 부분적으로 스타일을 다르게 적용할 수 있습니다. 이는 복잡한 텍스트 스타일링이 필요할 때 유용합니다.
Text 컴포넌트의 중첩사용 관련 예제
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
// <Text> 컴포넌트를 중첩하지 않고 사용했을 때
<View style={styles.background}>
<View>
<Text style={styles.text}> 중첩안한 Text 컴포넌트 </Text>
<Text style={styles.text}> 중첩안한 Text 컴포넌트 </Text>
<Text style={styles.text}> 중첩안한 Text 컴포넌트 </Text>
</View>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 35,
}
})
export default App;
위의 예제는 Text 컴포넌트를 중첩하지 않고 사용했을 때의 화면이고, 아래 예제는 Text 컴포넌트를 중첩하여 사용했을 때의 화면이다.
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
// <Text> 컴포넌트를 중첩하여 사용했을 때
<View style={styles.background}>
<View>
<Text style={styles.text}> 감싸주는 Text
<Text style={styles.text}> 안에있는 Text </Text>
<Text style={styles.text}> 안에있는 Text </Text>
</Text>
</View>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
}
})
export default App;
위의 예제를 통해 Text 컴포넌트는 중첩하여 사용하여도 제대로 출력되는 모습을 알 수 있고, 중첩하여 사용하게 될 경우 한 라인에 모든 텍스트들이 담긴다는 것을 알 수 있다.
<Button>
● 사용자가 탭할 수 있는 표준 버튼을 제공하는 컴포넌트이다. 하지만 스타일링이 제한적이라는 단점이 있다.
Button 컴포넌트의 특징
간편한 사용 : Button 컴포넌트는 title과 onPress 핸들러만 설정하면 바로 사용할 수 있기에 사용이 편하다
스타일링 제한: Button 컴포넌트는 텍스트 색상과 배경 색상을 일부 조절할 수는 있지만, 패딩, 마진, 테두리 등 세밀한 스타일링은 지원하지 않기에 스타일링에 있어 제한적이다. 그렇기에, 더 복잡한 스타일이 필요할 경우 TouchableOpacity를 활용한다.
크로스 플랫폼 기능 제공 : React Native의 Button은 iOS와 Android에서 네이티브 플랫폼의 버튼으로 렌더링 되기 때문에 각 플랫폼에 맞는 외형과 느낌을 각각의 OS에 맞게 스타일링해준다.
Button 컴포넌트와 관련된 예제
import React, {Component} from 'react';
import { View, StyleSheet, Button } from 'react-native';
const ButtonTest =() => {
return (
<View style={styles.background}>
<Button title="버어튼" onPress={()=>alert('응애')}/>
</View>
)
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#D197CF',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
},
})
export default ButtonTest;
<Image>
● Image 컴포넌트는 애플리케이션 내에서 이미지를 표시하는 데 사용되는 컴포넌트로, 다양한 소스에서 이미지를 로드하며, 모바일 환경에서의 이미지처리를 최적화해 주는 컴포넌트이다.
Image 컴포넌트의 특징
다양한 이미지 소스 지원 : 로컬이미지뿐만 아니라, 네트워크 이미지, Base64로 인코딩 된 이미지 등 다양한 이미지 소스들을 활용할 수 있다.
리사이징 기능과 유연한 스타일링 : cover, contain, stretch, repeat, center 등의 resizeMode 속성을 통해 이미지의 크기 조정 방식을 지정할 수 있으며, 색상만 인라인 스타일링을 통해 수정가능한 Button 컴포넌트와 달리 일반 View컴포넌트처럼 기본 style 속성들을 사용하여 유연하게 스타일을 적용할 수 있다.
이벤트 처리 : onLoad, onError, onLoadStart, onLoadEnd 등 이미지 로딩 과정에서 발생하는 다양한 이벤트를 처리할 수 있는 콜백 함수를 제공한다.
BackgroundImage 컴포넌트와 분리됨 : BackgroundImage 컴포넌트와 분리되어 있어 BackgroundImage 컴포넌트를 사용하려면 새로 import 해줘야 함
<Scroll View>
● Scroll View 컴포넌트는 ScrollView, FlatList, SectionList와 같은 스크롤이 가능한 컨테이너 컴포넌트로, 작은 양의 데이터 또는 몇 개의 컴포넌트를 스크롤할 때 주로 사용된다.
Scroll View 컴포넌트의 특징
콘텐츠 크기 자동 조절 : 내부 콘텐츠에 따라 자동으로 크기 조절을 해주며 사용자가 스크롤할 수 있게 스크롤 컨테이너를 제공해 준다.
다양한 이벤트 핸들링 : 스크롤의 시작과 종료, 드래그 등의 이벤트들을 처리할 수 있는 속성을 제공해 준다.
유연한 스타일링 : 색상만 인라인 스타일링을 통해 수정가능한 Button 컴포넌트와 달리 일반 View컴포넌트처럼 기본 style 속성들을 사용하여 유연하게 스타일을 적용할 수 있다.
수직/수평 스크롤 선택 가능 : horizontal 속성을 사용하여 수직 스크롤과 수평 스크롤들을 선택할 수 있다.
import React, {Component} from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
class App extends Component {
render() {
return (
// Scroll view 테스트
<View style={styles.background}>
<ScrollView width='100%'>
<View>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
<Text style={styles.text} onPress={ ()=>alert('나 왜 눌러') }> 버튼 눌러줭 </Text>
</View>
</ScrollView>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
textAlign: 'center',
backgroundColor: 'yellow',
height: 40,
margin:10,
},
})
export default App;
<TouchableOpacity>
● View와 같은 영역과 관련된 컴포넌트로 해당 영역을 터치에 반응하도록 만들어주는 컴포넌트이다. 또한, 터치하면 투명도가 변하는 효과를 가지고 있음
TouchableOpacity 컴포넌트의 특징
터치 반응 : 해당 컴포넌트영역을 터치에 반응할 수 있게 해 주기에 터치이벤트에 필수적인 요소
이벤트 처리 : onPress, onLongPress, onPressIn, onPressOut과 같은 다양한 터치 이벤트를 처리할 수 있게 해 줌
클릭 시 투명도 조절 : TouchableOpacity 영역을 터치했을 때 해당 영역의 투명도를 조절하여 클릭이벤트의 시각적 효과를 극대화시켜 줄 수 있음
<TouchableWithoutFeedback>
● View와 같은 해당 영역을 터치에 반응하도록 만들어주는 컴포넌트로, TouchableOpacity랑 거의 동일하지만 터치 시 투명도 조절을 하지 않는다. 그렇기에 영역터치 시 투명해지는 것 없이 View 컴포넌트를 터치가능하게 해주고 싶을 때 사용함
TouchableWithoutFeedback 컴포넌트의 특징
터치 반응 : 해당 컴포넌트영역을 터치에 반응할 수 있게 해 주기에 터치이벤트에 필수적인 요소
이벤트 처리 : onPress, onLongPress, onPressIn, onPressOut과 같은 다양한 터치 이벤트를 처리할 수 있게 해 줌
클릭 시 안투명해짐 : TouchableOpacity 영역을 터치했을 때 해당 영역을 투명하게 해주는 TouchableOpacity와는 다르게 터치해도 투명해지지 않음
Touch Event 추가하는 방법
터치 이벤트를 작성하기 위해서 컨테이너 역할을 하는 View 컴포넌트를 터치할 수 있게 해주는 TouchableOpacity를 필수적으로 사용해야 하기에 가장 먼저 TouchableOpacity를 import 해야 한다. (TouchableWithoutFeedback으로도 가능)
1. TouchOpacity를 import 하기 (TouchableWithoutFeedback으로도 가능)
// 'TouchableOpacity'를 'react-native'로 부터 import하기
import { TouchableOpacity } from 'react-native';
TouchOpacity를 import 해줬다면, TouchOpacity를 View 컴포넌트에 씌워야 한다. 그래야 View 컴포넌트 영역이 터치가능해진다.
2. TouchOpacity 컴포넌트를 View 컴포넌트에 씌우기 (TouchableWithoutFeedback으로도 가능)
// TouchableOpacity를 View 컴포넌트에 씌우기
return (
<TouchableOpacity style={styles.background} onPress={( ()=>alert('터치 발생!') )}>
<View style={styles.background}>
<Text style={styles.text}> {props.name} </Text>
</View>
</TouchableOpacity>
)
TouchOpacity 컴포넌트를 View 컴포넌트에 씌워줬다면 터치를 감지했을 때 이벤트를 발생시키는 데 사용되는 함수인 onPress를 태그 안에 입력해줘야 한다.
3. TouchOpacity 컴포넌트 태그 안에 onPress 메서드로 터치이벤트 적용시켜 주기 (TouchableWithoutFeedback으로도 가능)
return (
<TouchableOpacity onPress={( ()=>alert('터치 발생!') )}>
<View>
<Text > 촌스러운 여행 </Text>
</View>
</TouchableOpacity>
)
위 과정을 정리하여 아래 예제를 통해 터치이벤트를 발생시켜 보도록 하겠다.
터치 이벤트 관련 예제
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
// 터치이벤트 발생 함수
const touchEvent =() => {
return (
<TouchableOpacity style={styles.background} onPress={( ()=>alert('터치 발생!') )}>
<View style={styles.background}>
<Text style={styles.text}> 촌스러운 여행</Text>
</View>
</TouchableOpacity>
)
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
width: '100%',
height: '100%',
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 35,
},
})
export default touchEvent;
위의 예제는 TouchableOpacity를 이용한 터치 이벤트를 구현한 예제이고 아래는 TouchableWithoutFeedback으로 구현한 터치이벤트 예제이다.
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, } from 'react-native';
// 터치이벤트 발생 함수
const touchEvent =() => {
return (
<TouchableWithoutFeedback style={styles.background} onPress={( ()=>alert('터치 발생!') )}>
<View style={styles.background}>
<Text style={styles.text}> 촌스러운 여행 </Text>
</View>
</TouchableWithoutFeedback>
)
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
width: '100%',
height: '100%',
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 35,
},
})
export default touchEvent;
+React Native에서 컴포넌트를 쓸 때에는 위에 React-Native로부터 import 해서 불러오는 코드를 작성해줘야 함
태그를 쓰기 위한 예시
import { View, Text, StyleSheet } from 'react-native';
Style을 주는 방법 정리
1, 인 라인 스타일링
● 컴포넌트 괄호 내에 Style을 지정해 주는 방법으로, 컴포넌트 < > 태그 내에 style={{원하는 스타일지정}} 를 작성해 주면 된다.
(+인라인 스타일링에서 중괄호 2개 중 첫 번째 중괄호는 JSX코드를, 두 번째 중괄호는 객체를 담는 것을 의미한다)
인라인 스타일링 관련 예제
import React, {Component} from 'react';
import { View, Text, } from 'react-native';
class App extends Component {
render() {
return (
// 인 라인 방식으로 스타일 주기
<View style={{flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 30, color: 'red'}}> Style test</Text>
<Text style={{fontSize: 30, color: 'blue'}}> Style test</Text>
</View>
)
}
}
export default App;
위의 예제는 인 라인 스타일링을 통해 스타일을 지정한 예제이다. 아래에서는 스타일 시트를 활용한 스타일링에 대해 다뤄보도록 하겠다.
2. StyleSheet를 활용한 스타일링
● React-Native로부터 StyleSheet를 import해와서 StyleSheet.create 메서드를 활용해 styles라는 객체를 할당하여, styles라는 객체의 속성에서 스타일링을 지정해 주는 방법
StyleSheet를 사용하기 위해선 먼저 react-native로부터 StyleSheet를 import 받아와야 함
// 'react-native'로 부터 'StyleSheet'를 import받아오기
import { StyleSheet } from 'react-native';
StyleSheet를 import 받아왔다면 다음으로는 StyleSheet.create 메서드를 통해 styles객체를 선언해줘야 함
// 스타일 시트 객체 선언
const styles = StyleSheet.create({
text1: {
fontSize: 20,
color: 'green',
},
})
Styles객체까지 선언해 줬다면 < > 태그 안에서 해당객체를 style={스타일 객체}의 형태로 불러와주면 된다.
class App extends Component {
render() {
return (
// < > 태그 안에서 해당 스타일 객체를 불러오기
<View>
<Text style={styles.text1}> StyleSheet test</Text>
</View>
)
}
}
StyleSheet를 활용한 스타일링 관련 예제
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
// StyleSheet를 활용하여 스타일링주기
<View style={styles.background}>
<Text style={styles.text1}> StyleSheet test</Text>
<Text style={styles.text2}> StyleSheet test</Text>
</View>
)
}
}
// 스타일 시트 객체 선언
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text1: {
fontSize: 20,
color: 'green',
},
text2: {
fontSize: 20,
color: 'blue',
},
})
export default App;
위의 예제는 StyleSheet를 활용해 스타일링을 지정해 주는 예제이다. styleSheet와 styles객체를 통해서도 인라인 스타일링과 똑같이 스타일링을 지정해 주는 것을 알 수 있다.
flex 스타일 관련 내용 추가정리
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
<View style={styles.background}>
<Text style={styles.text}> flex style test</Text>
<Text style={styles.text}> flex style test</Text>
<Text style={styles.text}> flex style test</Text>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
flex: 1,
fontSize: 20,
backgroundColor: 'yellow',
color: 'green',
margin: 10,
},
})
export default App;
위의 예제를 보면 3개의 Text 컴포넌트가 각각 flex 스타일을 1을 가지는 경우 3분의 1 씩 화면을 차지하게 되는 것을 알 수 있다. 여기서 text별로스타일을 지정하여 가각 flex를 1,2,3을 지정하게 되면 6 등분하여 첫 텍스트는 6분의 1만큼을 차지하고 2번째 텍스트는 3분의 1을 차지하고 나머지 세 번째 텍스트트 2분의 1을 차지하게 될 것이다, 해당 부분은 flex 스타일에 대한 깊은 이해를 위해 아래에 추가적으로 예제를 작성해 보도록 하겠다.
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
<View style={styles.background}>
<Text style={styles.text1}> flex style test</Text>
<Text style={styles.text2}> flex style test</Text>
<Text style={styles.text3}> flex style test</Text>
</View>
)
}
}
// 스타일 시트
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text1: {
flex: 1,
fontSize: 20,
backgroundColor: 'yellow',
color: 'green',
margin: 10,
},
text2: {
flex: 2,
fontSize: 20,
backgroundColor: 'yellow',
color: 'green',
},
text3: {
flex: 3,
fontSize: 20,
backgroundColor: 'yellow',
color: 'green',
margin: 10,
},
})
export default App;
위의 예제를 통해 위에서 말했던 flex 속성이 맞다는 것을 알 수 있다.
Button 스타일링
앞서 Button은 스타일링에 있어 제한적이라고 했는데 어떤 게 제한적인지 예제를 통해 확인해 보고자 한다.
// 버튼 스타일 시트
button: {
width:120,
height: 50,
backgroundColor: 'red',
}
버튼의 크기와 색상을 변경하려 했지만 제대로 변경되지 않는 모습니다.
그렇다면 버튼은 어떤 스타일링만 가능한 것일까? Button에서 스타일링할 수 있는 요소는 color 뿐이면 그마저도 인라인 스타일링으로만 가능하다.
import React, {Component} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
// 버튼 터치이벤트 발생 함수
const ButtonTest =() => {
return (
<View style={styles.background}>
<Button title="버어튼" onPress={()=>alert('응애흥애')} style={styles.button}/>
</View>
)
}
// 스타일 시트
const styles = StyleSheet.create({
button: {
color: "#841584",
}
})
위 예제는 StyleSheet를 활용하여 버튼의 색상을 바꾼 예제이고, 아래는 인라인 스타일링을 통해 바꾼 버튼의 스타일링이다.
import React, {Component} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
// 버튼 터치이벤트 발생 함수
const ButtonTest =() => {
return (
<View style={styles.background}>
<Button title="버어튼" onPress={()=>alert('응애흥애')} color="#841584"/>
</View>
// 인라인을 통해 버튼의 색상을 번경
)
}
위 예제를 통해 알 수 있듯이 버튼 컴포넌트의 스타일링은 인라인 스타일링을 통해 색상변경만 가능하다는 것을 알 수 있다. 좀 더 다양한 버튼 디자인을 구현하고 싶다면 버튼 컴포넌트가 아닌 Touchableopacity를 활용하는 것을 추천한다.
'프로그래밍 언어 > React Native (RN)' 카테고리의 다른 글
| RN 프로젝트 파일 구조에 대해 (0) | 2024.06.26 |
|---|---|
| React Native를 위한 React 기본 문법 정리 (0) | 2024.06.26 |
| React Native CLI 개발환경 구축 (window버전) (0) | 2024.06.24 |
| 2가지 React Native 개발 환경의 차이점 (0) | 2024.06.24 |
| React Native는 어떤 언어일까? (0) | 2024.06.24 |