Heim  >  Artikel  >  Web-Frontend  >  Listen Sie die wichtigen Kernkomponenten von React Native auf

Listen Sie die wichtigen Kernkomponenten von React Native auf

WBOY
WBOYnach vorne
2023-09-08 21:25:06856Durchsuche

Die wichtigsten Kernkomponenten in React Native sind wie folgt:

Scrollview - cc64e9eba48df49c2b22d3ab3fc1cfdf In einem Webbrowser ändert sich die cc64e9eba48df49c2b22d3ab3fc1cfdf-Komponente mit Komponenten und Ansichten Rollcontainer. Wenn die App auf einem Android-Gerät angezeigt wird, wird die 3bda1eaf2818b810be2a25a0a48094bb-Komponente in 4fd0db87786572d5bb22974cf6a288d3 geändert.

Ein Eingabeelement, in das der Benutzer Text eingeben kann Hier sind die Elemente für 548e7793df275d156d270cdda504ba19, 7afbc23223af17d69e2ad2a4e42c6248, be6f9d9f8d3942f7e92b94b40bc4843d, cc64e9eba48df49c2b22d3ab3fc1cfdf TextInput> ArbeitsbeispielView-Komponente wird hauptsächlich zum Speichern von Text, Schaltflächen, Bildern usw. verwendet. So verwenden Sie diese Komponente Wie unten gezeigt –
React Native-Komponenten Native Android-Ansicht IOS-Native-Ansicht Webbrowser Anweisungen
. Anzeigen - d32bf55763944c04ae2edffb492b3792 zu 7b55e845865ed5229d0ea222bb08d5e9

Wenn die App auf einem IOS-Gerät angezeigt wird, ändert sich die Komponente 548e7793df275d156d270cdda504ba19 UIView>

Die 548e7793df275d156d270cdda504ba19-Komponente wird in einem Webbrowser in ein dc6dce4a544fdca2df29d5ac0ea9906b-Tag geändert.

ist der Kerncontainer, der das Flexbox-Layout unterstützt. Es verwaltet auch die Touch-Handhabung.

Text - 7afbc23223af17d69e2ad2a4e42c6248 Wenn die App auf Android-Geräten angezeigt wird, ändert sich die 7afbc23223af17d69e2ad2a4e42c6248-Komponente in c398514c3e3771c7c856bd5623ce1ff8

Wenn die App auf IOS-Geräten angezeigt wird, wird die acfbe3c9b18a6da6ca52526420ece58c

Wenn die App auf Android-Geräten angezeigt wird, wird die Komponente be6f9d9f8d3942f7e92b94b40bc4843d in 1510c774b1594fafafc2ba10dbf90fe9 geändert.

Wenn die App auf IOS-Geräten angezeigt wird Wenn sie in einem Webbrowser angezeigt wird, ändert sich die Komponente be6f9d9f8d3942f7e92b94b40bc4843d in 5a1331ec3bc21641e8b198e67846b424 Wenn sie in einem Webbrowser angezeigt wird, ändert sich die Komponente be6f9d9f8d3942f7e92b94b40bc4843d Wird zum Anzeigen von Bildern verwendet.

Wenn die App auf Android-Geräten angezeigt wird, wird die cc64e9eba48df49c2b22d3ab3fc1cfdf-Komponente in cc64e9eba48df49c2b22d3ab3fc1cfdf geändert.

Wenn die App auf IOS-Geräten angezeigt wird In einem Webbrowser ändert sich die cc64e9eba48df49c2b22d3ab3fc1cfdf-Komponente in d0ff0624d90fab52e480f913eef08e4d

TextInput - 3bda1eaf2818b810be2a25a0a48094bb

Wenn die App angezeigt wird ein IOS-Gerät Wenn die 3bda1eaf2818b810be2a25a0a48094bb-Komponente in 4fd0db87786572d5bb22974cf6a288d3 geändert wird;

Wenn die 3bda1eaf2818b810be2a25a0a48094bb-Komponente in einem Webbrowser angezeigt wird; Text" >-Tag.

Beispiel

Um Text, View, Image, ScrollView, TextInput zu verwenden, müssen Sie Komponenten aus React-Native importieren, wie unten gezeigt -

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

<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>
enthält Text- und Bildkomponenten. Die ScrollView-Komponente verhält sich wie eine übergeordnete Komponente, die View, Text, Image, Button und andere React Native-Komponenten verarbeitet.

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;
Ausgabe

Das obige ist der detaillierte Inhalt vonListen Sie die wichtigen Kernkomponenten von React Native auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen