JSX 문법 Button(+TouchableOpacity), Image

Button 태그

예시)

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"
},
});

--> 팝업 띄우기 --> Alert.alert("팝업 내용")


--> Button 태그 예시
--> 이러한 속성들은 공식문서에 기술되어 있으므로 이용할 것

<Button 
      style={styles.buttonStyle} 
      title="버튼입니다 "
      color="#f194ff" 
      onPress={function(){
        Alert.alert('팝업 알람입니다!!')
      }}
    />
    
    --> Button태그에 onPress를 설정하는 것으로 클릭시 실행될 내용을 설정할 수 있음
    
  
  

TouchableOpacity

--> Button의 onPress를 다른 곳에서도 사용하기 위한 태그
--> Button이 아닌 다른 태그도 TouchableOpacity로 감싸면 onPress를 설정할 수 있다.
= 클릭시 실행될 내용을 설정할 수 있다. --> 해당 영역을 누르면 onPress 실행

예시)

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>

);
}

Image 태그

예시1) --> assets 폴더(이미지 저장폴더)에 해당 이미지가 있을 경우

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}>

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

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
//혹시 미리 궁금하신 분들을 위해 언급하자면,
//justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});

--> Image 태그의 source 부분이 assets에서 불러온 이미지를 담은 변수로 설정되어 되어 있음

<Image
source={favicon}
resizeMode={"repeat"}
style={styles.imageStyle}
/>

예시2) 이미지를 외부에서 불러와서 사용해야 되는 경우

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}>

		{/*이미지 태그 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>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
//혹시 미리 궁금하신 분들을 위해 언급하자면,
//justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});

--> Image태그의 source 부분이 불러올 이미지의 경로로 설정되어 있음 (위의 예시의 경우 해당 경로에 이미지를 인터넷에서 받아서 사용)

<Image
source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
resizeMode={"cover"}
style={styles.imageStyle}
/>

  --> url부분에 중괄호 하나 더 되어있는 것 체크 !