React Native의 중요한 핵심 구성 요소 나열

반응 네이티브에서 가장 중요한 핵심 구성 요소는 다음과 같습니다 -

React 네이티브 구성 요소	Android 네이티브 보기	IOS 네이티브 보기	웹 브라우저	설명
보기 - <보기>	Android 기기에서 앱이 보일 때 컴포넌트는 으로 변경됩니다.	앱이 IOS 기기에서 보일 때 컴포넌트가 로 변경됩니다.	웹 브라우저에서 볼 때 컴포넌트는 태그로 변경됩니다.	플렉스박스 레이아웃을 지원하는 코어 컨테이너입니다. 또한 터치 처리를 관리합니다.
텍스트 - <텍스트>	Android 기기에서 앱이 보일 때 컴포넌트는 로 변경됩니다.	앱이 IOS 기기에서 보일 때 컴포넌트는 로 변경됩니다.	웹 브라우저에서 볼 때 구성 요소는 태그로 변경됩니다.	사용자에게 텍스트를 표시하는 데 사용됩니다. 또한 스타일 지정 및 터치 이벤트도 처리합니다.
이미지 - <이미지>	Android 기기에서 앱이 표시되면 구성 요소가 로 변경됩니다.	앱이 IOS 장치에서 표시되면 구성 요소가 로 변경됩니다.	웹 브라우저에서 볼 때 컴포넌트는 태그로 변경됩니다.	이미지를 표시하는 데 사용됩니다.
스크롤 보기 -	안드로이드 기기에서 앱이 보이면 컴포넌트가 로 변경됩니다.	앱이 IOS 기기에서 보이면 컴포넌트가 로 변경됩니다.	웹 브라우저에서 볼 때 컴포넌트는 태그로 변경됩니다.	구성 요소와 보기가 있는 스크롤 컨테이너입니다.
텍스트 입력 - <텍스트 입력>	Android 기기에서 앱이 표시되면 구성 요소가 로 변경됩니다.	앱이 IOS 장치에서 표시되면 구성 요소가 로 변경됩니다.	웹 브라우저 내에서 구성 요소가 표시되면 태그로 변경됩니다.	사용자가 텍스트를 입력할 수 있는 입력 요소

예시

다음은 , , , 및

Text, View, Image, ScrollView, TextInput으로 작업하려면 아래와 같이 react -native에서 구성 요소를 가져와야 합니다. -

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

View 컴포넌트는 주로 text, button, Image 등을 유지하는데 사용됩니다. 컴포넌트는 다음과 같이 사용됩니다 -

<View>
   <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
   <Image
      source={{
         uri: 'https://www.tutorialspoint.com/react_native/images/logo.png',
      }}
      style={{ width: 311, height: 91 }}
   />
</View>

텍스트 및 이미지 구성 요소가 있습니다. ScrollView 구성 요소는 View, Text, Image, Button 및 기타 React Native 구성 요소를 처리하는 상위 구성 요소처럼 작동합니다.

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

const App = () => {
   return (
      <ScrollView>
         <Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
         <View>
            <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
            <Image
            source={{
               uri:'https://www.tutorialspoint.com/react_native/images/logo.png',
            }}
            style={{ width: 311, height: 91 }}
         />
      </View>
      <TextInput
         style={{
            height: 40,
            borderColor: 'black',
            borderWidth: 1
         }}
         defaultValue="Type something here"
      />
      </ScrollView>
   );
}
export default App;

출력