보기 및 텍스트와 같은 기본 React Native 구성 요소를 소개합니다.

이 게시물에서는 다음과 같은 기본 React Native 태그에 대해 설명합니다.

보기

텍스트

텍스트 입력

반응 네이티브 구성 요소의 스타일을 지정하는 StyleSheet입니다.

이 게시물은 내 React Native 시리즈의 일부입니다.

위에서 언급한 React Native 태그를 사용하기 전에 먼저 가져와야 합니다.

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

이제 이러한 태그에 대해 알아봅시다.

1. 보기:

View는 return 문에서 상위 구성 요소를 래핑하는 데 사용하는 react.js의 div와 같습니다.

비교는 아래와 같이 시각화할 수 있습니다.

// React.js 'div'
return(

<div>
<span>Text</span>
</div>

)

// React Native 'View'
return(

<View>
<Text> Text </Text>
</View>

문서에서 분명히 말했듯이,

View is the most fundamental component for building UI in a react native mobile app.

반응 네이티브의 모든 파일은 return 문을 감싸고 있어야 합니다View.

2. 텍스트:

반응 네이티브에서 프런트엔드 화면에 텍스트 메시지 또는 일반 텍스트를 표시하는 데 사용할 수 있습니다.

다음과 같은 많은 html 요소와 유사(비교 가능)합니다.

피태그

h1-h6 태그

문자 메시지를 표시하는 데 사용되는 span, div 태그입니다.

return(
<View>
<Text> My name is Gautham</Text>
</View>

3. 텍스트 입력:

React Native에서 사용자로부터 입력 값을 얻기 위해 사용됩니다.

동일한 onChange 개념이 여기에도 적용됩니다.

import React,{useState} from 'react'

const app = () =>{
const [inputValue,setinputValue] = useState('')
return(
<View>

<TextInput onChange={value =>setinputValue(value)} value={inputValue}> My name is Gautham</TextInput>

</View>
}

4. 스타일시트:

StyleSheet를 사용하여 반응 네이티브 앱에 스타일을 추가할 수 있습니다.

변수를 만들고 여기에 필요한 모든 CSS 속성을 입력합니다.
style={} 에서 객체의 키를 소품으로 전달할 때 각 반응 네이티브 태그가 다른 스타일을 가질 수 있도록 객체 형식으로 만들어야 합니다.

CSS에 능숙한 프론트엔드 개발자의 가장 큰 장점은 React Native 태그의 스타일을 지정하기 위해 새로운 속성을 배울 필요가 없으며 일반 CSS 속성을 사용할 수 있지만 유일한 차이점은 camelCase를 사용해야 한다는 것입니다.

예시,

font-size를 fontSize로 사용해야 합니다.

배경색 --> backgroundColor.

return(

<View>
<Text style = {styles.textstyle}>
</Text>
</View>

)
const styles = StyleSheet.create({

  textstyle: {
    color: 'red',
    fontSize : '30px'
  },
});

문자 메시지는 글꼴 크기 30px의 빨간색으로 표시됩니다.

그리고 이것들은 초보자로서 알아야 할 기본 React Native 태그입니다.

자신의 CSS 속성으로 styleSheet 개념을 가지고 놀아보세요.

react-native docs에서 이러한 개념을 정말 잘 설명하고 제가 배운 내용을 참조할 수 있습니다.

다음 게시물에서는 다음과 같은 더 많은 반응 네이티브 태그를 다룰 것입니다.

터치할 수 있는 불투명도

버튼

이미지

플랫리스트 등.

계속 지켜봐 주세요.

읽어 주셔서 감사합니다!!

내 포트폴리오 확인: Gautham's portfolio

내 블로그 확인: coding-magnified.tech

저에게 감사하거나 저를 응원하고 싶다면 아래 링크로 저에게 커피를 사주실 수 있습니다.

내 다른 기사:

.

.