Home  >  Article  >  Web Front-end  >  List the important core components of React Native

List the important core components of React Native

WBOY
WBOYforward
2023-09-08 21:25:06856browse

The most important core components in React Native are as follows-

When the app is shown in an Android device, the 548e7793df275d156d270cdda504ba19 component will change to 7b55e845865ed5229d0ea222bb08d5e9When the app is shown in an IOS device77ac3fea9f31217e07e7afc7cfe5e843 component will change to dd7063ac101aa7bf295aba6fff6a7a1f When seen in a web browser, the 548e7793df275d156d270cdda504ba19 component will change to dc6dce4a544fdca2df29d5ac0ea9906b tagWhen the app appears on an Android device the 7afbc23223af17d69e2ad2a4e42c6248 component will change as c398514c3e3771c7c856bd5623ce1ff8 When the application is seen in an IOS device, the 7afbc23223af17d69e2ad2a4e42c6248 component will change to 15da638d5cfcec0a99eb38297c6012eb When seen in a web browser, the 7afbc23223af17d69e2ad2a4e42c6248 component will change to the e388a4556c0f65e1904146cc1a846bee tag used to display text to the user. It also handles styles and touch events. When an application sees the be6f9d9f8d3942f7e92b94b40bc4843d component in an Android device will be changed to 1510c774b1594fafafc2ba10dbf90fe9 When the app is seen in an IOS device, the be6f9d9f8d3942f7e92b94b40bc4843d component will be changed to 5a1331ec3bc21641e8b198e67846b424When viewed in a web browser, the be6f9d9f8d3942f7e92b94b40bc4843d component will change to the a1f02c36ba31691bcfe87b2722de723b tag used to display the image. When the application is seen in an Android device, the cc64e9eba48df49c2b22d3ab3fc1cfdf component will change to < ;ScrollView>When the application is seen in an IOS device, the cc64e9eba48df49c2b22d3ab3fc1cfdf component will change to d0ff0624d90fab52e480f913eef08e4d

When seen in a web browser, the cc64e9eba48df49c2b22d3ab3fc1cfdf component changes to a dc6dce4a544fdca2df29d5ac0ea9906b tag

that has the component and the view's scroll container. ##TextInput - 3bda1eaf2818b810be2a25a0a48094bbExample
React Native components Android native view IOS native View Web Browser Description
#View-548e7793df275d156d270cdda504ba19

is the core container that supports flexbox layout. It also manages touch handling.

Text - 7afbc23223af17d69e2ad2a4e42c6248

Image - be6f9d9f8d3942f7e92b94b40bc4843d

Scrollview - cc64e9eba48df49c2b22d3ab3fc1cfdf

When the application is displayed in the Android device, 3bda1eaf2818b810be2a25a0a48094bb The component will change to 4fd0db87786572d5bb22974cf6a288d3

When the application is displayed in an IOS device, the 3bda1eaf2818b810be2a25a0a48094bb component will change to 4fd0db87786572d5bb22974cf6a288d3 to 052e7434143fb5cd73fe5438953c55a8

When the 3bda1eaf2818b810be2a25a0a48094bb component is seen in a web browser, it will be changed to an 23efcc05e98690ceeb219581933e4231 tag.

An input element in which the user can enter text

Below is a working example of 548e7793df275d156d270cdda504ba19, 7afbc23223af17d69e2ad2a4e42c6248, be6f9d9f8d3942f7e92b94b40bc4843d, cc64e9eba48df49c2b22d3ab3fc1cfdf and 3bda1eaf2818b810be2a25a0a48094bb

To use Text, View, Image, ScrollView, TextInput you need to start from react -native import components, as shown below-

import { View, Text, Image, ScrollView, TextInput } from &#39;react-native&#39;;

View component is mainly used to save text, buttons, pictures, etc. The usage of this component is as follows- p>

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

There are text and image components in it. The ScrollView component behaves like a parent component handling View, Text, Image, Button, and other React Native components.

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

const App = () => {
   return (
      
         Welcome to TutorialsPoints!
         
            Inside View Container
            
      
      
      
   );
}
export default App;

Output

The above is the detailed content of List the important core components of React Native. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete