初心者のReact Native + Redux

プログラミング歴半年の素人が書いています。

間違いのないようご自身でも良く調べた上でお願いいたします。

対象読者

• モバイルアプリ開発をしたことがない人
• JavaScriptの基礎構文がわかる人
• Reactを知っている人
• Macの人

わたしです。 試行錯誤の記録となっておりますので、ベストプラクティスではない可能性が十分含まれておりますことご了承ください。

#環境構築

Node.jsのインストール

上記リンクからダウンロードできます。

ReactNativeのインストール

各種必要素材をインストトールします。

brew install node
brew install watchman

以下「cocoapods」は2020年2月の最新バージョンだとエラーになる事があります。
その場合は古いバージョンを指定してインストトールすると治るかもしれません。

sudo gem install cocoapods

react-nativeの新規プロジェクトを作成します。

npx react-native init AwesomeProject

新規プロジェクトが作成できたら、以下のコマンドで起動。

cd AwesomeProject
npx react-native run-ios

これで起動できない時もある...。上記は公式チュートリアル通りなんだけど。で、もっかいやり直すと動いたりする。

Reduxのインストール

ReduxはStateを一元管理するための仕組みです。
なぜStateの管理を一つにまとめる必要があるかというと、複数のコンポーネントが独自にStateを管理している状態は見通しが悪く、バグの原因になったり修正のしにくい状態だからです。

以下のコマンドでReduxをインストールする事ができます。

yarn add redux react-redux

React Native + Redux のディレクトリ構成

• ReactはViewの管理（見た目を作るコンポーネントなど）
• ReduxはStateの管理（State管理のために「action」「reducer」「State」の３つが必要）

をそれぞれ行います。
したがって、ルート直下は以下のような構成とします。

[project root]
 `- [src]
     |-[actions]
     |-[reducers]
     |-[states]
     |-[views]
        |-[components]
        `-[containers]

合わせて、ルート直下にある App.js を削除し、src/views/containers/App.js を作成します。

画面を作って表示させる

画面を作ることと、表示させることは、２つの異なる作業です。
まずは、画面を作って行きます。

Component と Containerについて

先ほどのディレクトリ構成で「View」を構成する2つの要素のディレクトリを作成しました。それぞれ以下のような役割分担になっています。

####「Components」は見た目を担当

Componentsは見た目を担当し、ロジック部分には関与しません。

####「Containers」はロジック部分を担当

Containersはロジック部分を担当し、見た目には関与しません。
したがって、Containerは自分自身のDOM要素は持たず、Styleなども当たりません。

画面を作る

では画面を作ります。

見た目を担当する部分は「Components」内に作ります。
最初の画面なので「LandingPage.js」と名付けました。
ますばシンプルに、画面中央に挨拶を表示。

components/LandingPage.js

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

const LandingPage = () => (

    <View style={styles.View}>
        <Text>はじめての React Native</Text>
    </View>
)

export default LandingPage;

//スタイルの記述はこんな感じ。使えば分かる感じのヤツ！
const styles = StyleSheet.create({
    View: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
})

表示させる部分を作る

表示させる、ロジックを担当する部分は「Containers」内に記述。

シンプルに、先ほど作ったLandingPage.jsを表示するだけです。

containers/App.js

import React, { Component } from 'react';
//
import LandingPage from '../components/LandingPage';


export default class App extends Component {
    
    render() {
        return (
            <LandingPage />
        );
    }
}

index.jsから呼び出す

では、ルート直下のindex.jsからviews/contaieners/App.jsを呼び出します。
これで、アプリ起動後にLandingPage.jsの画面が描画されます。

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/views/containers/App'; //ここでimport
import {name as appName} from './app.json';

// そして呼び出し
AppRegistry.registerComponent(appName, () => App); 

次回に続く