[reactNative]ルール
3488 ワード
1.View-React Nativeはサイトではありません。
HTMLではないので書けません.代わりに.
Viewは容器です.作成するコンテンツはすべてViewとして作成されます.
divではなくViewを作成するため、常にインポートする必要があります。

2.Text-ractネイティブのすべてのテキストをTextに含める必要があります。
ブラウザではないためspan、pなどのタグは存在しません.
したがって、ビューなどのテキストタグの外にテキストを入れると、万博Goはエラーを画面に出力します.

ご覧のように、従わなければならないルールがあります.
ブラウザでreact jsを使用する場合は、p、span、divを使用します.つまりHTMLが使えます.しかしreact nativeはこれらの事実を知らなければならない.
3.Viewはスタイルがあります。react jsと同様に使用できます。違いは、いくつかのスタイルが許可されていないことです。

ブラウザであれば起動できるプロパティをstyleにあげます.
border : "1px green dash"


エラーメッセージが表示されることを確認できます.結論としてWebで使用したすべてのものを完全に使用することはできません.98%くらいで使えます.
StyleSheet.create({})
スタイルのobjectを生成します.
text : {
fontSize : 28,
}
*font-size 아니고 JS 로 작성해야 하기 때문에 fontSize 임.


StyleSheet.createは、非常に有用な自動補完機能を提供します.また、管理スタイルコンポーネントも便利です.しかし、これは必須ではありません.スタイルを適用するタグには、style={}}のネストされたカッコに属性と値を付け、同じ動作をします.この場合、必ずしもstyleobjectは必要ありません.(スタイルをタグに直接適用する場合は、objectがパラメータであるため、二重カッコを使用する必要があります.)
スタイルシートはよく見かけるので、書くか書かないかを選択します.また、スタイルを分離する場合でも、スタイルシートは必須ではありません.

では、スタイルシートなぜcreate()を書くのですか?しかし、これはpropertyの自動完了と関係があると思います.

CSS自動完了はcolorでサポートされていません.スタイルシートだけです.createはobjectにすぎません.しかし、非常に素晴らしい自動完了機能をサポートしています.また、styleの名前を付ける場合は、特定の命名規則に従う必要はなく、CSSのclass名に従って名前を付けるだけです.
また、ラベルに直接書いても自動完了がサポートされています.問題はstyleが長くなるかもしれないことです.
通常、人々はcomponentを作成し、styleを作成します.したがって、通常、スタイルシートでスタイルを区別し、componentと書きます.
StatusBar-iOSやAndroidなどのオペレーティングシステムとのコミュニケーションのために存在するコンポーネントもあります。
StatusBarはreact-nativeからインポートされていません.
StatusBarはサードパーティ製ライブラリです.
サードパーティ製コンポーネントが重要です.

この構成部品はレンダリングされていますが、画面には存在しません.
それは何ですか.
StatusBarは、時間、バッテリー、Wi-Fiを表します.
私たちはブラウザにいません.react-オリジナルは開発者に提供されるインタフェースにすぎません.iOSやAndroidなどのオペレーティングシステムを構成するために.
この素子はステータスバーとコミュニケーションする方法にすぎない.
style="light"
はい、容器の背景色を黒に変更してください.以前

後。

オートからライトになるにつれて、白い背景のときはステータスバーが見えなくなりますが、背景色を変えると変化が確認できます.
React-ネイティブは、CSSのエラーをエラーメッセージとして出力する利点があります.これはブラウザには存在しません.例:
color = "#red"
エラーが発生した場合
StatusBarは
一部のコンポーネントとreact-ネイティブは、オペレーティングシステムとのコミュニケーションのために存在します.
これは、React JSを体験したことがある場合は、画面に表示されたり戻ったりするすべてのコンテンツを表示することができるためです.画面に表示されないコンポーネントもあります.iOSやAndroidなどのオペレーティングシステムとのコミュニケーションのために存在するコンポーネントもあります.
Reference
この問題について([reactNative]ルール), 我々は、より多くの情報をここで見つけました https://velog.io/@sa03134/React-Native-규칙들テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol