React Native基礎①

コード記述の点で、React.jsとの最大の違いは、

HTML風のタグを使っていたが、React Native独自のタグ(XML仕様)を使用する点である。

このため、部品さえ指定すれば自動的に作成してくれていた部分をある程度記載しないと部品が表示されないようになっている。

そのために、CSS的な記述がほぼ必須になってくるので、すべての部品で、

style属性が用意されている。

style={ {color : 'red' } }といったようにそれぞれに記載することもできるようであるが、

このようにオブジェクトリテラルを使用する場合は、下記のようにするのが通例である。

すなわち、StyleSheetクラスのcreateメソッドを使用して、stylesオブジェクトリテラルを作成し、そこにすべて詰め込むことができる。

 

その他はtailwindなどを使用することである。

React Nativeでもtailwindを使えるライブラリがある。tailwind-rnは設定がめんどくさくなっているので、現在、tailwind-react-native-classnamesを使用しやすい。

 

ここでは、expoというものを使ってReact Nativeをやっていきます。

まず、Node.jsをインストールする。

npm install -g expo-cli

expo init sample_expo

これで、sample_expoというプロジェクトが作成できる。

実装して、

npm start で実行。

 

VSCodeのターミナルで上記の実行ができない場合があります。

その際は下記をまず入力してEnter後に入れてみてください。

Set-ExecutionPolicy RemoteSigned -Scope Process