[앱화면만들기] <Button> <Image>

1. <Button> 

import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, } from "react-native"; export default function App() { return ( <View style={styles.container}> <View style={styles.textContainer}> <Text style={styles.textStyle}>아래 버튼을 눌러주세요.</Text> <Button style={styles.buttonStyle} title="버튼입니다." color="#f194ff" onPress={() => Alert.alert("팝업!!!")} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, textContainer: { height: 100, margin: 10, paddingTop: 50, }, textStyle: { textAlign: "center", }, });

위와같이 버튼 태그에 title, color, onPress 속성들은 공식문서를 통해 참고하면 좋을 것 같다.

https://reactnative.dev/docs/button

Button · React Native

https://reactnative.dev/docs/alert#docsNav

Alert · React Native

 

간단하게 버튼을 만들어서 얼럿을 띄우는것까지 해서 기능을 만들어보았다.

 

참고사항으로, onPress에 연결한 함수 구현부를 JSX 밖에서 구현한 다음 연결할 수 도 있다. 

... export default function App() { const customAlert = () => {     Alert.alert("JSX 밖에서 함수 구현 가능!") } return ( ... <Button style={styles.buttonStyle} title=" " color="#f194ff" onPress={customAlert} /> ...

2.<TouchableOpacity/>

영역을 가지고 있는 버튼에도 <TouchableOpacity>를 사용하면 동일한 이벤트를 만들 수 있다.

import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } from "react-native"; export default function App() { const customAlert = () => { Alert.alert("TouchableOpacity에도 onPress 속성이 있다. "); }; return ( <ScrollView style={styles.container}> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}> 영역을 충분히 갖는 텍스트 영역입니다. </Text> </TouchableOpacity> </ScrollView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, textContainer: { height: 100, borderColor: "#000", borderWidth: 1, borderRadius: 10, margin: 10, }, textStyle: { textAlign: "center", }, });

3. <Image>

이미지를 넣는 방법은 크게 2가지로 나뉘어진다.

 

1) assets 폴더에 있는 이미지를 가져와서 사용하는 방법 (import)

2) 외부 이미지 링크를 넣어서 사용하는 방법(URL)

 

https://reactnative.dev/docs/image#docsNav

Image · React Native

* 예제 - 간단히 사용방법만 알아보고 넘어가자.

import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; import favicon from "./assets/favicon.png" export default function App() {     return (         <View style={styles.container}>         <Image           source={favicon}          resizeMode={"repeat"}          style={styles.imageStyle}         />        </View>    ); } .... * 외부링크 사용하는경우 <Image      source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}       resizeMode={"cover"}       style={styles.imageStyle} />