React Native Core Components

React Native 에서 가장 자주 사용되며, 중요한 component 들로는 View. Text, Image, Button, Touchable, Alert 이 있습니다

https://reactnative.dev/docs/components-and-apis

1.View

View 는 가장 기본적인 UI 상태에서의 UIView 를 가리키며, View 에도 몇개의 Component 종류가 있습니다

SafeAreaView

iphone 기준에 상단 노치 부분에 요소들을 위치 시키지 않으려면 SafeAreaView 가 필요합니다

return (
  <SafeAreaView style={styles.container}>
    <Text>Welcome React Native </Text>
    <StatusBar style="auto" />
  </SafeAreaView>
);

2.Text

https://reactnative.dev/docs/text

App 상에서 Text 를 사용할때 Text component 를 사용해야 합니다. 또한 Text 를 꾸미기 위해서 여러가지 Props 도 있으니, 익혀야 합니다 몇가지 중요한 props 를 다루자면

numberOfLines

https://reactnative.dev/docs/text#numberoflines

Text 가 길게 되면 UI 화면에서 복잡해지게 되는데 그럴때 numberOfLines 를 설정하게 되면, 최대 텍스트 라인을 설정하면서 뒤에는 생략되게 … 으로 표시되게 됩니다

<Text numberOfLines={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</Text>

onPress

https://reactnative.dev/docs/text#onpress

Text 를 누르게 되면 Event 이벤트 동작을 실행하는 props 입니다

export default function App() {
  // Property
  const handlePress = () => console.log("Text pressed");

  return (
    <SafeAreaView style={styles.container}>
      <Text numberOfLines={3} onPress={handlePress}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

3.Image

Image 를 불러오늘 component 입니다.

<Image source={require("./assets/icon.png")} />

네트워크 상에서의 이미지를 불러올때는 다음과 같습니다

여기서 체크해야될 사항은 네트워크 이미지 상에서의 사이즈는 모르기 때문에 불러올 이미지의 사이즈 weight, height 을 넣어줘야 합니다

<Image
  source=
/>

official docs 에 나오듯이 Image 에 관한 여러 props 들이 있는데 자주 사용되는 몇 가지 props 를 소개하겠습니다

blurRadius

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

이미지에 blur 효과를 주는 props 로써 예시 코드는 다음과 같습니다

<Image
  blurRadius={10}
  source=
/>

4.Touchable

Touchable component 는 다른 event props 없이 유저가 터치를 했을때, 이벤트를 실행 시켜주는 component 로써

종류로는 TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback 이 있습니다

TouchableWithoutFeedback 을 하게 되면 터치 했을때, 피드백 없이 event 가 동작이 되며,

TouchableOpacity 은 클릭하게되면 opacity 효과가 들어가는 component 입니다

<TouchableOpacity onPress={() => console.log("Image touch")}>
  <Image
    source=
  />
</TouchableOpacity>

TouchableHighlight 는 event 실행시, Highlight 효과를 나타냅니다

<TouchableHighlight onPress={() => console.log("Image touch")}>
  <Image
    source=
  />
</TouchableHighlight>

5.Button

6.Alert

---

🗃 Reference

Programming with Mash - https://youtu.be/ANdSdIlgsEw