앱개발 학습. View, Text, ScrollView, Button, TouchableOpacity, Image

 

// 앱개발 학습 - 2주차(스파르타코딩클럽)

화면에 하늘색으로 표시되는 글자는 '속성'

- 버튼 설명서

https://reactnative.dev/docs/button

Button · React Native

 

View tag

import { StyleSheet, Text, View } from 'react-native'; 

• View 태그는 react-native 도구에서 꺼내옴
• View : 화면의 영역을 나눔 
  • backgroundColor : view태그의 배경색을 정함

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.subContainerOne}></View>
      <View style={styles.subContainerTwo}></View>
    </View>
  );
}

Text tag

• Text : 글자는 Text태그 안에 들어가야 함

export default function App() {
  return (
    <View style={styles.container}>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
    </View>
  );
}

ScrollView tag

• ScrollView : 이 엘리먼트로 감싸면 그 영역 스크롤이 가능해짐

export default function App() {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
    </ScrollView>
  );
}

Button Tag

• 사용방법

 <Button
          style={styles.buttonStyle}
          title="버튼입니다 " // 안에 있는 글자
          color="#f194ff"  // 색깔
          onPress={function(){ //누를 때 기능
           Alert.alert('팝업 알람입니다!!')
          }}
/>

• onPress 화살표 함수로 구현하기

 onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}

 

import React from 'react';
import { 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>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

SafeAreaView

• 상단 상태바를 제외하고 화면을 그림

<SafeAreaView style = {styles.container}>
    <View style={styles.textContainer}>
      <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
      {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
      <Button 
        style={styles.buttonStyle} 
        title="버튼입니다 "
        color="#f194ff" 
        onPress={function(){
          Alert.alert('팝업 알람입니다!!')
        }}
      />
      {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
      <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#FF0000" 
          onPress={()=>{
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        </View>
</SafeAreaView>

Alert

• 팝업을 구현 

반복되는 코드, 함수로 만들어 빼기

const customAlert = () => {
    Alert.alert("JSX 밖에서 함수 구현 가능")
  }

  return (

• onPress에 직접 customAlert 바인딩(함수 연결)

onPress={customAlert}  //소괄호 없음

• onPress에 함수 만들어서 customAlert 바인딩

onPress={()=>{
  customAlert()
}}

<TouchableOpacity/>

• 버튼 태그는 자체의 영역을 가지므로 스타일을 주기 어려움이 있음
• 원하는 영역에 버튼같은 효과를 주는 방법 <TouchableOpacity/>
  
  • 옷을 입히기가 훨씬 수월하다.

import React from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Alert } 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>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

 

<Image>

• 1. 프로젝트 안의 Assets 폴더에서 불러오는방식
  • './' : 상대주소(동일한 폴더 뎁스)

import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
    	{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
     	<Image 
        	source={favicon}
			// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        	resizeMode={"repeat"}
        	style={styles.imageStyle}
      	/>
    </View>
  );
}

• 2. 외부 Url에서 이비지를 불러와 사용하는 방식
  • source 의 uri 안에 주소를 넣어줌

export default function App() {
  return (
    <View style={styles.container}>
    	{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      	<Image 
        	source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
			// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        	resizeMode={"cover"}
        	style={styles.imageStyle}
      	/>
    </View>
  );
}