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.jsonmain: "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>
    );
  }
}

描画した画面は以下となります

f:id:jesushill:20180708144541p:plain