ホームページ >ウェブフロントエンド >jsチュートリアル >React Native の重要なコア コンポーネントをリストする
React Native の最も重要なコア コンポーネントは次のとおりです-
React Native コンポーネント | Android ネイティブ ビュー | IOS ネイティブ表示 | Web ブラウザ | 説明 |
---|---|---|---|---|
#表示-b3f6d2e99bd71dbb2b65ad40c92bf0e0 | アプリが Android デバイスに表示されると、548e7793df275d156d270cdda504ba19 コンポーネントは 7b55e845865ed5229d0ea222bb08d5e9##アプリが IOS デバイスに表示されると、548e7793df275d156d270cdda504ba19 コンポーネントが変更されますWeb ブラウザで表示すると、548e7793df275d156d270cdda504ba19 コンポーネントは dc6dce4a544fdca2df29d5ac0ea9906b タグ |
## に変更されます。は、フレックスボックス レイアウトをサポートするコア コンテナーです。タッチ操作も管理します。 |
Text - 7afbc23223af17d69e2ad2a4e42c6248 | |
に変更されます。アプリケーションが IOS デバイスで表示されると、7afbc23223af17d69e2ad2a4e42c6248 コンポーネントは 15da638d5cfcec0a99eb38297c6012eb | # に変更されます。 # Web ブラウザで表示すると、7afbc23223af17d69e2ad2a4e42c6248 コンポーネントは、ユーザーにテキストを表示するために使用される e388a4556c0f65e1904146cc1a846bee タグ |
に変わります。スタイルやタッチイベントも処理します。 |
画像 - c57f1e7288184f7433124ca4739271f3 | |
に変更されます。be6f9d9f8d3942f7e92b94b40bc4843d コンポーネントは 5a1331ec3bc21641e8b198e67846b424 | に変更されます。 Web ブラウザで表示すると、be6f9d9f8d3942f7e92b94b40bc4843d コンポーネントは、画像の表示に使用される a1f02c36ba31691bcfe87b2722de723b タグ |
に変わります。 |
Scrollview - cc64e9eba48df49c2b22d3ab3fc1cfdf | アプリケーションが IOS デバイスで表示されると、cc64e9eba48df49c2b22d3ab3fc1cfdf コンポーネントは d0ff0624d90fab52e480f913eef08e4d | に変わります。 Web ブラウザで表示すると、cc64e9eba48df49c2b22d3ab3fc1cfdf コンポーネントは、コンポーネントとビューのスクロール コンテナを含む dc6dce4a544fdca2df29d5ac0ea9906b タグ |
TextInput - 3bda1eaf2818b810be2a25a0a48094bb | アプリケーションが Android デバイスに表示されるとき、3bda1eaf2818b810be2a25a0a48094bbコンポーネントは 4fd0db87786572d5bb22974cf6a288d3
に変更されます。アプリケーションが IOS デバイスで表示されると、3bda1eaf2818b810be2a25a0a48094bb コンポーネントは 4fd0db87786572d5bb22974cf6a288d3 から 052e7434143fb5cd73fe5438953c55a8## に変更されます。 | #3bda1eaf2818b810be2a25a0a48094bb コンポーネントが Web ブラウザで表示されると、23efcc05e98690ceeb219581933e4231 タグに変更されます。 | ユーザーがテキストを入力できる入力要素 | 例 |
以下は、548e7793df275d156d270cdda504ba19、7afbc23223af17d69e2ad2a4e42c6248、be6f9d9f8d3942f7e92b94b40bc4843d、cc64e9eba48df49c2b22d3ab3fc1cfdf、3bda1eaf2818b810be2a25a0a48094bb | Text、View、Image、ScrollView、TextInput を使用するには、次の操作を行う必要があります。以下に示すように、react -native import コンポーネントから開始します-
<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>
import React from 'react'; import { View, Text, Image, ScrollView, TextInput } from 'react-native'; const App = () => { return (); } export default App; Welcome to TutorialsPoints! Inside View Container
出力
p>
以上がReact Native の重要なコア コンポーネントをリストするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。