React Native(Hello World)
はじめに
最近、React Nativeを勉強しています。 これから、ちょくちょく自分の頭の整理がてら、 色々と書き込んでいきます!
開発環境はExpoを用いました!
フォルダ構成
Expoから空のプロジェクトを作成した際、以下のフォルダ構成となります。
$ tree -L 2 --filelimit 10 | pbcopy # 階層コピペ . ├── App.js ├── app.json ├── assets │ ├── icon.png │ └── splash.png ├── node_modules [531 entries exceeds filelimit, not opening dir] └── package.json
Expoを起動した際は、App.jsが起動(注)されるので 今回は、App.jsのみにコード記載していきます。
注) package.jsonに main: "node_modules/expo/AppEntry.js"
と記載あり
AppEntry.jsはApp.jsの読み込みを記載されている。
Hello World
Helloworldは以下の通りで表示できます。
この際、重要なのは以下の2点です。
export
を用いて、module化render
メソッドを用いてcomponentを作成
※ component はググるといろいろと関連した記事がいっぱいできますが、 画面を描画する際のパーツを作っているといった理解でまずは良いと思います。
実際のコードは以下の通りとなります。
import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; export default class Test extends React.Component { render(){ return ( <View style={{alignItems: 'center', marginTop: 200}}> <Text>Hello World</Text> </View> ); } }
描画した画面は以下となります