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

長さや大きさの指定には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>

点数

感想

Expoとは

環境構築

CSS

React Native Paper

インストール

babel.config.jsに追加

App.js

React Native Paperのサンプル

テキスト

ボタン

カード

リスト