「基礎から学ぶReact Native入門」の感想・備忘録1

基礎から学ぶReact　Native入門

posted with ヨメレバ

中川幸哉/山田祥寛翔泳社 2021年02月

楽天ブックスで見る

Amazonで見る

Kindleで見る

点数
感想
Expoとは
1. 環境構築
CSS
React Native Paper
React Native Paperのサンプル

点数

93点

感想

環境構築、Expo、React Native Paper、リリースなどReact Nativeを使うのに必要なことが網羅されていた。
Reactの知識があればスラスラ読むことができ、なかなかの良書だった。

Expoとは

ExpoはReact Nativeの開発環境の構築、ビルド、実機確認などを簡単にしてくれるツール群。
便利機能を集めたもの。
Expoを使用しない場合、XcodeやAndroid Studioをインストールしないと実機で動作確認することができない。

環境構築

npx create-expo-app MyProject
(書籍内ではexpo-cliを使っているがdeprecatedになっているため、ここではcreate-expo-appを使う)

CSS

長さや大きさの指定にはpxやptなどの単位を付けない（width, heightの%指定は可能）
これにより端末に依存するピクセルサイズの違いを意識する必要がなくなる。
スタイルには「レイアウト」と「装飾」がある
- レイアウト: Flexbox関連やマージンなど。
  ほぼ全てのコンポーネントに指摘可能。
- 装飾: 色や罫線など。
  Textコンポーネントだけに使えるスタイルがあるので注意。
- なぜTextコンポーネントのスタイルだけ特別扱いなのか？
  ⇒HTML要素のほとんどはテキストをボディに持つが、ネイティブUIはそうではないため。
一部だけ装飾する（HTMLでのspan）
Textを入れ子にする。
「Textコンポーネントの内側に配置された場合だけインライン要素として振る舞う」という特殊な挙動が実装されている。
レイアウト
- レイアウト機能はFacebook製のYogaエンジンによって実現されている。
- Yogaエンジンは「左上の座標」「幅」「高さ」を決定することで描画している。
- margin: 10 20;のような省略記法は使えない。
  その代わりReact Native独自のプロパティとしてmarginVertical, marginHorizontal, paddingVertical, paddingHorizontalがある。
Flexbox
- 全てのコンポーネントはデフォルト以下のスタイルになっている。
  display: "flex"
  flexDirection: "column"
- 折り返し flexWrap: "wrap"

React Native Paper

インストール

npm install react-native-paper

babel.config.jsに追加

babel.config.jsにenvキーを追加（リリースビルドに必要な設定）

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ["react-native-paper/babel"]
      }
    }
  };
};

App.js

import {Provider as PaperProvider} from 'react-native-paper'

export default function App() {
  return (
    <PaperProvider>
      {/* この中でReact Native Paperを使うことができる */}
    </PaperProvider>
  );
}

React Native Paperのサンプル

テキスト

<Headline>見出し</Headline>
<Title>タイトル</Title>
<Subheading>サブ見出し</Subheading>
<Paragraph>段落</Paragraph>

ボタン

<Button>普通のボタン</Button>
<Button mode="contained">containedボタン</Button>
<Button mode="outlined">outlinedボタン</Button>

カード

<Card>
  <Card.Cover source={require("../assets/icon.png")}/>
  <Card.Title title="ここにタイトルが入ります" subtitle="ここにサブタイトルが入ります" left={()=><Paragraph>アイコン</Paragraph>}/>
  <Card.Content>
    <Paragraph>ここに本文が入ります。</Paragraph>
  </Card.Content>
  <Card.Actions>
    <Button>見ない</Button>
    <Button mode="contained">見る</Button>
  </Card.Actions>
</Card>