[React-Native] Image, StatusBar, BackgroundColor

1. Image 넣는법

react native에서 Image를 넣을때는 내장 컴포넌트인 Image component를 사용하면 된다.

<Image
  style={styles.image}
  source={require("../assets/images/goal.png")}
/>

위와 같이 사용할 수 있으며, 주의해야할점은 image의 경로를 받아올 때 require함수를 사용하여 현재 위치부터의 상대경로를 사용해야 한다는 점이다.

2. StatusBar 조작하기

react native에서 Status bar를 조작하기 위해서는 StatusBar component를 사용하면 된다.
하지만 이것은 expo의 기능이므로 expo를 사용하지 않거나 expo-status-bar모듈이 설치되어있지 않으면 사용할 수 없다.

<StatusBar style="light" />

위의 코드와 같이 사용하면 되는데, style에 들어갈 수 있는 내용은 4종류가 있다.

• auto: 자동으로 적절한 값을 선택해준다 (default)
• light: 상태 표시줄의 텍스트와 아이콘을 밝은 색으로 설정
• dark: 상태 표시줄의 텍스트와 아이콘을 어두운 색으로 설정
• inverted: 상태 표시줄의 텍스트와 아이콘을 반전시켜 표시

3. 기본 backgroundColor 설정하기

backgroundColor를 설정하는데는 여러가지 방법이 있지만 모든 컴포넌트에서 쓰일 default backgroundColor를 설정할 때 app.json에서 설정하는 방법이 존재한다.
이 또한 expo가 지원하는 기능중 하나인데,

{
  "expo": {
    "name": "RNCourse",
    "slug": "RNCourse",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "backgroundColor": "#1e085a",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

위의 app.json의 8번째줄을 보면 backgroundColor를 지정해 준 모습이 보인다.
이렇게 할 시 모든 컴포넌트의 기본 배경화면의 색깔을 동시에 지정해줄 수 있다.