React Native: 기본 구성 요소

지난 일주일 동안 React Native를 심도 있게 연구해 왔습니다.저는 주로 React for Front End Development에 관심을 가지기 때문에 React Native for mobile Development는 자연스러운 발전이 될 것이라고 생각합니다.이번 주에, 나는 당신에게 제공된 기본 구성 요소와 React를 사용하여 웹 개발을 하는 것과 비교하는 것을 알려 드리겠습니다.
React는 모든 부분을 구성 요소로 분해함으로써 복잡한 웹 응용 프로그램을 쉽게 만들 수 있는 라이브러리입니다.계속해서 읽기 전에 React 구성 요소에 대한 내용을 읽어서 자신을 익히려면 몇 주 전에 쓴 글을 마음대로 보십시오.
React-Native는 웹 구성 요소를 사용하지 않고 응용 프로그램의 구축 블록을 만드는 것을 제외하고 모든 React-Native 구성 요소가 본 컴퓨터 구성 요소에 비추는 같은 기능을 제공합니다.이 컴퓨터는 이 컴퓨터를 사용하기 때문에 구성 요소가 JSX나 HTML로 돌아가지 않고 이 컴퓨터의 구성 요소로 돌아갑니다.이 글은 가장 자주 사용하는 본체 구성 요소를 알아보고 ReactJS와 비교하도록 안내합니다. (해당하는 경우)
View View 구성 요소는 React 도구 상자에서 가장 기본적인 구성 요소입니다.View는 개발 중인 모든 플랫폼의 효과 본체 보기에 직접 비치는 용기 구성 요소입니다.If는 웹 개발 중인 a<div>에 해당하며 a<div>처럼 다른 <View>에 끼워 넣을 수 있고 어떠한 유형의 하위 대상도 가진다.다음 예<View>를 보십시오.

import React from "react";
import ( View, Text } from "react-native";

const WelcomeScreen = () => {
  return (
    <View>
      <Text> Welcome! </Text>
    </View>
  )
}

Text위의 코드 예시에서, 당신은 내가 몰래 추가 구성 요소를 추가한 것을 알아차렸을 것입니다.이것은 Text 화면에 텍스트를 표시하는 데 사용되는 구성 요소입니다.그것들도 끼워 넣을 수 있는데 대체로 <p>에 해당한다.
Image Image 구성 요소는 Text 구성 요소와 매우 비슷하지만 텍스트가 아닌 이미지를 표시하는 데 사용됩니다.그것은 <img/> 와 유사하다.source 속성을 사용하여 표시할 그림을 지정하거나 require() 함수를 그림 파일과 함께 전달하거나 대상과 그림uri를 함께 전달할 수 있습니다.다음은 하나의 예다.

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

const ImageExample = () => {
  return (
    <View>
      <Image source={require('./image.jpg')} />
      <Text>This image used the require function!</Text>
      <Image source={ {uri: 'https://image.com'} } />
      <Text>This image used a uri</Text>
    </View>
  )
}

TextInput이 구성 요소는 사용자가 키보드를 통해 텍스트를 프로그램에 입력할 수 있도록 합니다.그것은 <input type="text"> 와 매우 비슷하다.많은 도구들이 추가적인 기능과 설정을 제공할 수 있지만, 우리는 간단함을 유지할 것이다.가장 간단한 용례는 사용자에게 입력 텍스트 상자를 보여주고 onChangeText로 데이터를 읽는 것이다.그것을 사용하는 간단한 구성 요소가 어떻게 되는지 봅시다.
(이 예에서 사용된 갈고리에 대해 더 알고 싶으시면 React 갈고리에 대한 댓글을 보십시오.)

import React from 'react';
import { TextInput } from 'react-native';

const UselessTextInput = () => {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <TextInput
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

ScrollView ScrollView와 View 구성 요소는 매우 비슷하지만, 나는 네가 스크롤 바가 있는 보기를 제공할 것이라고 믿는다.그것은 반드시 경계가 있는 높이가 있어야 하며, 그렇지 않으면 약간의 문제에 부딪힐 수 있으니 주의하십시오.이를 위해 가장 간단한 방법은 부모의 유한한 높이를 확보하는 것이다.속성을 직접 설정할 수도 있지만 문서에서는 권장하지 않습니다.

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

const ScrollExample = () => {
  return (
    <View style={ {flex: 1} }>
      <ScrollView>
        <Text>
          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>
      </ScrollView>
    </View>
  );
}

스타일시트
마지막 구성 요소의 사용 방식은 우리가 이전에 토론한 다른 구성 요소와 약간 다르다.너는 <StyleSheet> 이런 것을 보지 못할 것이다. 반대로, 너는 그것으로 StyleSheet 대상을 만들 것이다. 이 대상은 유사한 CSS 추상으로 사용할 수 있다.대상은 보통 키 이름을 포함하는데, 그 값 자체가 대상이다.이 값들은 CSS 속성과 값과 유사한 키 값 쌍을 포함한다.
점 기호를 사용하여 이러한 객체를 스타일 도구로 어셈블리에 전달하여 어셈블리에 스타일을 제공할 수 있습니다.스타일시트 구성 요소는 자동으로 속성 이름을 검증하기 때문에, 이 방법은 줄 안의 스타일을 제공하는 것보다 더 좋습니다.그것도 더욱 깨끗해 보이며 관심사를 분리하는 데 도움이 된다.
만약 이 모든 것이 약간 곤혹스러워 보인다면, 간단한 예가 실천에서 어떤 모습을 보일지 봅시다.

import React from "react";
import ( View, Text, StyleSheet } from "react-native";

const WelcomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}> Welcome! </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "blue"
  },
  text: {
    backgroundColor: "red",
    textAlign: "center",
    fontSize: 30
  }
})

다음은 React Native에서 가장 많이 사용되는 구성 요소에 대한 기본 개요입니다.서로 다른 구성 요소를 어떻게 사용하는지 더 깊이 있게 알고 싶으면 Components documentation 보거나 React Native에 대한 더 많은 정보를 보십시오Official documentation.