HTML要素とNativeコンポーネントの違いの比較
1771 ワード
Webアプリケーションを開発し,
,,など,様々なHtml基本要素を用いて比較する.
React Nativeを開発する場合、HTML要素は使用できませんが、図のようなさまざまなコンポーネントを使用することができます.
HTML
React Native
div
View
img
Image
span,p
Text
これらの要素には似たような用途がたくさんありますが、彼らは同等ではありません.これらのコンポーネントがモバイル側でどのように動作しているかを見てみましょう.
1、テキストコンポーネント
レンダーテキストは基本的な機能のように見えますが、ほとんどのアプリケーションではレンダーテキストが必要です.しかし、一般的なWebのTextレンダリング方式とは異なります.
React Nativeでは、コンポーネントのみが純粋なテキストのサブノードとして機能し、言い換えれば、これは無効です.
逆に、コンポーネントを使用してテキストの内容をパッケージします.
React Nativeでは、コンポーネントを処理する場合、やのようなサブラベル列を使用する必要はありませんが、fontWeightやfontStyleのようなプロパティを使用することで、スタイルを適用して同様の効果を実現することができます.以下では、インラインスタイルを使用して同様の効果を実現します.
上のような書き方は、非常に冗長に見えるかもしれません.
React Nativeを開発する場合、HTML要素は使用できませんが、図のようなさまざまなコンポーネントを使用することができます.
HTML
React Native
div
View
img
Image
span,p
Text
これらの要素には似たような用途がたくさんありますが、彼らは同等ではありません.これらのコンポーネントがモバイル側でどのように動作しているかを見てみましょう.
1、テキストコンポーネント
レンダーテキストは基本的な機能のように見えますが、ほとんどのアプリケーションではレンダーテキストが必要です.しかし、一般的なWebのTextレンダリング方式とは異なります.
React Nativeでは、
<View>
</View>
逆に、
<View>
<Text></Text>
</View>
React Nativeでは、
<Text>
The quick <Text style={{fontStyle:"italic"}}>brown</Text>
fox jumped over the lazy<Text style={{fontWeight:"bold"}}>dog</Text>
</Text>
上のような書き方は、非常に冗長に見えるかもしれません.