【React Native】基本構文の解説

どうも、とがみんです。

iOSアプリ、アンドロイドアプリの両方に対応したプログラムを書くことのできるReact Nativeについて、

この記事では、プロジェクト作成後、App.jsというファイルにデフォルトで書かれているコードについて説明していきたいと思います。

Contents

プロジェクト作成後のサンプル
App.jsファイル内のコード
まとめ
参考文献

プロジェクト作成後のサンプル

プロジェクト作成後、アプリを起動させると、ただの文字が表示されます。

以下のものは、ただただ、画面の中央に「とがみんブログ(togamin.com)」と表示するだけのサンプルです(笑)

これを表示するコードについて見ていきます。

【React- Native】
勉強開始！ pic.twitter.com/fsiDm3tWsM
— とがみん@ブロガー(セブ留学→東京) (@togaminnnn) 2019年2月12日

App.jsファイル内のコード

プロジェクトを作成すると、App.jsというファイルが生成されます。

そのファイルの中身を見ていきます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>とがみんブログ(togamin.com)</Text>
      </View>
    );
  }
}

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

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

render() {

return (

<Text>とがみんブログ(togamin.com)</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

});

import/export

exportは、指定した関数、変数、オブジェクト、クラスなどを受け取り、任意のファイルでそれらを使えるようにするための構文です。

importは別ファイルからexportされた関数、変数、オブジェクト、クラスなどを読み込み、それらを使えるようにするための構文です。

import React from 'react';//①
import { StyleSheet, Text, View } from 'react-native';//②

export default class App extends React.Component {}//③

import React from 'react';//①

import { StyleSheet, Text, View } from 'react-native';//②

export default class App extends React.Component {}//③

①はreact.jsファイル内でexportされたReact要素を読み込むコードで、

②はreact-native.jsファイル内でexportされた、StyleSheet, Text, Viewを読み込んでいます。

③は、React.Componentクラスを継承したAppというクラスを他のファイルでも扱えるようにするためにexportしています。

export defaultは、ファイル内で１つだけ定義することができ、importする際に特に指定がなければ、default指定されたものを呼ぶというものです。

render

次にAppクラス内のrenderについて説明します。

これは、React.Componentクラスに必須のメソッドで、ReactがもつUIの要素を返す役割を持ちます。

render() {
    return (
      <View style={styles.container}>
        <Text>とがみんブログ(togamin.com)</Text>
      </View>
    );
}

render() {

return (

<Text>とがみんブログ(togamin.com)</Text>

</View>

);

}

＞ReactDOMのrender()とReact.Componentのrender()の違いを理解する

＞React.Component

StyleSheet

Styleは、色やフォントサイズ等デザインに関する詳細を書いて行きます。

const styles = StyleSheet.create({
  container: {
    flex: 1,//画面全体に表示
    backgroundColor: '#fff',//背景色を白にする
    alignItems: 'center',//Itemを横方向の中心に位置させる
    justifyContent: 'center',//Itemを縦方向の中心に位置させる
  },
});