Reactローカルルール

divの代わりにView Componentを使用します.

すべてのテキストは、テキストコンポーネント内にある必要があります.

import {StatusBar} from "expo-status-bar";
import React from "react";
import {StyleSheet, Text, View} from "react-native";

export default function App() {
    return (
        <View style={styles.container}>
            <Text>Open asdasdup App.js to start working on your app!</Text>
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

StyleSheet.createを使用しないでstyleオブジェクトを作成できますが、使用しないと自動的に完了できません.これは不便です.

      <StatusBar style="auto" />
      

StatusBarがレンダリングされているのが見えますが、画面には表示されません.
これはreactiJSと大きな違いがあります.
一部のコンポーネントはiosまたはandriodオペレーティングシステムとコミュニケーションするためのメディアです.
上のStatusBarコンポーネントは、ステータスバーをオペレーティングシステムに説明しています.
さらに、StatusBarはreact-ネイティブパッケージからインポートされません.
以前はサポートされていましたが、現在のバージョンではサポートされていません.
初期の反応チームは、開発者にできるだけ多くの機能を提供することを望んでいましたが、多くの機能が多くのエラーをもたらし、基本的に提供されるコンポーネントの数を減らすことに気づきました.(もちろん、速度と容量の問題は非常に大きい)
したがって,本文書でもオープンソースパッケージの使用が明確に要求されている.
しかし、オープンソースパッケージを使うよりも、更新されている万博パッケージを使うほうがいいです.

Native Layout

Webとの違い

ビューコンポーネントのデフォルト設定はdisplay:flexです.

flex-directionのデフォルト値はcolumnです.

箱の大きさはwidth、heightに設定しません.

大きなフレームは3種類あります.
箱の大きさの設定方法は比例してセグメント化されています.