Help us understand the problem. What is going on with this article?

【React Native初心者】Expo Snackのコードを読んでみる

More than 1 year has passed since last update.

Expo Snackを使ってReact Nativeのコードを勉強をしました。その時調べた内容や理解したことをまとめます。

Expo Snackとは

Expo snackとは、React Native用のPlaygroundサービスです。
環境構築をせずに、オンラインのブラウザ上でReact Nativeのコード動作を確認できます。

Expo Snack

Expo Snackにアクセスすると、デフォルトで何やらコードが書いてあります。
今回は、もともと書いてあるコードからReact Nativeの仕組みやコードの書き方を勉強します。

※もともと書いてあるコードは時期によって変わっているかもしれません。
スクリーンショット 2019-11-06 10.44.34.png

Expo Snackのファイル構成

ファイル構成
project
├── assets
│   └── snack-icon.png    //画像
├── components
│   └── AssetExample.js  //コンポーネント
├── App.js               //アプリの全体
├── package.json
└── README.md

画面を構成するコードが書かれてるのはcomponents/AssetExample.js(コンポーネント)App.js(アプリの全体)です。

App.jsを読む

はじめにApp.js(アプリの全体)のコードを見ます。
import部分、export部分、styles部分の3つに分けてみていきます。

App.js(コード全体)
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

import部分

import...外部のモジュールを読み込む。
App.jsで利用したいコンポーネントなどをimportで読み込んでいます。

import 名前 from '読み込みたいものの元'
App.js(import部分)
//reactを読み込む(必須)
import * as React from 'react';
//react-nativeからコンポーネント"Text, View, StyleSheet"を読み込む 
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// 作ったコンポーネントを読み込む
import AssetExample from './components/AssetExample';

import { Card } from 'react-native-paper';

Text, View, StyleSheetを読み込む理由↓

React Nativeの基本文法
・ divやspanなどのDOMを使えない
・ DOMを使えない替わりに「View」や「Text」などコンポーンネントとして使う
・ テキストを扱う場合は「Text」。入れ物として扱う場合は「View」
・ CSSは使えないので、替わりにに「CSS in JS式」でスタイリングする
ReactNative 簡単なSample集より

export部分

画面に表示する部分です。

このAppクラスは、React.Componentクラスを継承している。React.Componentは、Reactのクラスである。つまり、ReactNativeは、Reactのシステムをそのまま利用している。
React.Componentは、renderメソッドを持っており、これは画面の表示を返すメソッドである。
React Nativeを簡単に利用できるExpo Snackでスマホアプリを作ってみるより

App.js(export部分)
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <Card> 
          {/* 関数を< />で囲むことでコンポーネントとして扱うことができる */}
          <AssetExample />
        </Card>
      </View>
    );
  }
}

< View >
htmlの< div>と似たような役割。
中に文字を書くことはできず、入れ物のような役割を持つ。
< Text >
htmlの< span>と似たような役割。
文字を描写するためには必ずTextで囲う必要がある。

(【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】1より)

表示結果↓
スクリーンショット 2019-11-07 19.47.07.png

styles部分

StyleSheets
スタイルを指定する。cssと似ているが、書き方が少し違う。
background-colorのようにハイフンがあるものはbackgroundColorのようにキャメルケースで定義
・数字以外のプロパティは文字列で定義 ex…'red'
などなど

App.js(styles部分)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

AssetExample.jsを読む

次にcomponents/AssetExample.js(コンポーネント)のコードを見ていきます。
App.jsのコード内容が理解できたら、こちらのコードも何をしているのかなんとなく分かります。

components/AssetExample.js(コード全体)
//必要なコンポーネントをimportする
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

//コンポーネントの内容(表示部分)
export default class AssetExample extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Local files and assets can be imported by dragging and dropping them into the editor
        </Text>
        <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
      </View>
    );
  }
}

//スタイル
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 128,
    width: 128,
  }
});


Expo Snackのコード内容をおおよそ理解しました。
これからReact Nativeの学習をより深めていきます。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away