[react-native] EXPO로 시작해보기 3 - 태그 추가해 보기 <Button> <Image>

 

정적인 이미지 추가 

<Image
    style={{width: 200, height: 150, marginBottom: 20}}
    source={{ uri: 'http://....' }}
/>

<Image
    style={{width: 200, height: 150, marginBottom: 20}}
    source={require(./assets/...)}
/>

<Image> 태그를 이용해 style을 적용하고, source 의 속성에 uri  값에 정적인 이미지 경로를 넣어준다. 

외부 링크라면 uri를  assets에 있는 이미지 파일을 가져온다면 require를 사용한다. 

 

https://docs.expo.io/versions/v33.0.0/react-native/images/

Images - Expo Documentation

 

버튼추가 

<Button
    onPress={onPressLearnMore}
    title="Button"
    color="#00ff00"
 />

 

<Button> 태그를 이용

onPress = 버튼클릭이벤트

title = 버튼에 들어갈 텍스트 

color = iOS의 경우 텍스트 색상, Android의 경우 배경색상이 된다.

 

버튼을 추가하면, 원하는 디자인으로 적용하기 힘들다.. 배경생이 마음대로 지정되지 않고, 안드로이드와 ios에서 다르게 보인다! 

그래서 나는 <Text onPress={}>Button</Text>으로 원하는 스타일을 적용해 사용한다! 

 

 

 

 

 

전체코드

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

import { Button, Image } from 'react-native';
//사용할 태그를 추가해준다. 

export default function App() {
  return (
    <View style={styles.container}>
      <Image
          style={{width: 200, height: 150, marginBottom: 20}}
          source={{ uri: 'http://....' }}
        />

      <Text>
        Hello World! 
      </Text>

      <Button
        onPress={onPressLearnMore}
        title="Button"
        color="#00ff00"
      />


    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FDEAEB',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


/*   onPress 이벤트에 적용될 함수   */
function onPressLearnMore(){
  alert("button click");
}