ReactMixフレームワークをベースにしたReactNativeApp開発を学ぶ12時間パッケージ (2) Css+HTML_html/css_WEB-ITnoseをベースに最初のアプリページを書く

前の記事で、誰もが ReactMix ( https://github.com/xueduany/react-mix ) フレームワークの基本を理解しました。私たちは、誰もが 1 セットのコードを使用できるようにする構文糖であることを理解しました。すべてのプラットフォームで実行できます。そこで今日はそれを試して、すべてのプラットフォームで実行できるページを作成してみます。

まず、準備する必要がある基礎知識は、H5 開発では、次のとおりです。

1. デフォルト レイアウト (ブロック要素とインライン要素)

2. 3 . レイアウトの配置(位置: 相対、絶対、上、左、右、下)

4. Flex レイアウト

ReactNative では、2 ではなく 1,3,4 を使用できます

さらに、H5 では、私たちの css 属性値には ReactNative にはない単位があり、ReactMix はこの問題を解決するのに役立ちます。構文シュガーとして、CSS 属性値の単位の問題をサポートしており、書くのと同じように 12px、12pt、12em を書くことができます。 css.12rem、およびこれらの単位は実際の効果を持ちます

px はピクセル、pt はポイント、em はデフォルトのフォント サイズ、デフォルトは 16px、rem は可変フォント サイズであり、画面サイズに応じて変化します。将来的には非常に重要なので、iOS の一般的なデバイス適応問題を解決するための鍵を使用してください。これにより、私の母はデバイス適応の問題について心配する必要がなくなります

それでは、最初に空白のページを作成しましょう。新しいデモ.js

( class Test apply

);

}

}).run();

ReactNative に精通している学生は、ReactNative でそれを知っているかもしれません。 、アプリが起動するとき、それを AppRegist に登録する必要があります。アプリにはメインの入り口があるため、開発者にとっては、さまざまなプラットフォームの実装と互換性のある入り口関数がカプセル化されています。 App クラスを作成し、ページを静的クラスとして使用し、独自の run メソッドを実行すると、アプリ内に表示できるようになります

開発者は、上記のような独自の静的クラスを記述し、App から継承するだけで済みます

次に、ReactJS テンプレートに従い、render メソッドで jsx 構文を返します (将来的には、HTML 変換に基づいて直接サポートされる予定です。現段階では React の方が人気があるため、依然として ReactJs テンプレート メソッドに基づいています)

次に、./css ディレクトリに test.css ファイルを作成し、スタイルを記述します

#J1 {

color: red;

}

.J2 {

background-color: yellow;

}

次に、コマンド ラインを開き、nodeact.css.build.js、

と入力します。CSS が同期されていることがわかります。test.js を ./reactnative/css ディレクトリにコンパイルし、対応するテストを生成します。 js ファイル

次に、この CSS ファイルを ./reactnative/demo.js ファイルに導入します。

includeCSS("require('./css/test')") と入力します

あなたなぜ 2 つの文字列があるのか​​疑問に思われるかもしれません。reactnative では、実際に必要なのは、ファイル ./css/test ではありません。 Reactnative では、string キーワードに従ってインポートされるため、require 構文を実行する必要はありません。その場合、使用する必要があるのは 1 文字だけです。String require を読み込むことができますが、H5 では CSS を読み込むために、その場所を知る必要があります。リンクを作成してheadに追加するという、このような奇妙な互換性のある記述方法があります。後ほど高度なテクニックについて説明するときに、これに焦点を当てた特別な章があります

CSSを導入した後、divノードをマークする必要があります。 ID と className を使用して、demo.js を次のように変更します

Start の結果は次のようになります

Browser./web /index.html

iOS、シミュレータを開始します

Android シミュレータを開始します

OK、ページをもう少し複雑にして、demo.js を次のように変更しましょう

それから CSS を変更し、クラス名のネストのいくつかの組み合わせを使用します

それから効果を確認してください

OK、これは入っています期待どおりであり、3 つのプラットフォームのパフォーマンスは基本的に同じです。

今週は 1 週間休みです。ReactMix プラットフォームの最近のバージョン変更が非常に頻繁に行われているので、皆さんがこの新しいフレームワークに注目していただければ幸いです。これからも頑張りますよ～！