wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

ペペロミアの更新 まとめ[v1.0.0 -v1.0.2]

更新した内容まとめ

https://github.com/wheatandcat/Peperomia/blob/master/CHANGELOG.md

v1.0.1更新

iPhoneSEのサイズに対応

  • 知人からiPhoneSEだと、UIがズレるとの報告にて対応

Peperomia/responsive.ts at master · wheatandcat/Peperomia · GitHub

import { Dimensions, PixelRatio } from "react-native";

const devices = {
  iPhoneSe: { width: 640 }
};

// https://stackoverflow.com/questions/39211518/how-to-get-the-correct-screen-width-in-react-native-ios
const fetchDeviceWidth = () =>
  Dimensions.get("window").width * PixelRatio.get();

const maxWidth = (max: number, yes: number, no: number) =>
  max >= fetchDeviceWidth() ? yes : no;

const whenIPhoneSE = (yes: number, no: number) =>
  maxWidth(devices.iPhoneSe.width, yes, no);

export { whenIPhoneSE };

バイスのwidthが640pxを以上か以内かで、styleの値を可変させるようにした。

バイスのサイズは以下で取得できる。

// window幅 × 解像度
Dimensions.get("window").width * PixelRatio.get();

使い方は以下の通り

<Text style={{ fontSize: whenIPhoneSE(12, 15)}}>ペペロミア </Text>

IPhoneSE以下のサイズだとfontSize:12で、それ以上だと15になる

Travis CIでテストを実行

Peperomia/.travis.yml at master · wheatandcat/Peperomia · GitHub

---
language: node_js
node_js:
  - "10.0.0"

branches:
  only:
  - master

cache:
  directories:
    - ~/.npm

env:
  global:
    - YARN_VERSION="1.9.4"

jobs:
  include:
    - stage: test
      env:
        - YARN_CACHE_FOLDER="/home/travis/yarn_cache"
      cache:
        directories:
          - $HOME/yarn_cache
      before_install:
        - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
        - export PATH="$HOME/.yarn/bin:$PATH"
      before_script:
        - cd PeperomiaNative
      script:
        - yarn
        - yarn test

合わせてexpoのデプロイもやろうとしたけどキャッシュの容量オーバーで断念

docs.expo.io

v1.0.2更新

e2e追加

Peperomia/plan.spec.js at master · wheatandcat/Peperomia · GitHub

「react-native-action-sheet」にtestID振れないなーと思っていたけど、 実はテキスト指定でtapすればOKだったことに気づいたので、編集と削除周りのe2eを追加した

   await element(by.text("編集")).tap();

並び替えのバグ修正

新規でスケジュールのアイテムを追加して並び替えを実行すると、 アイテムが正しく表示されないバグがあったので修正。

並び順でkeyにしている値が同じでDBに入るパターンがあったので修正

CHANGELOG追加

git-chglogを使って生成するようにしました。

github.com

今後

次からはGItHuから追えるように拡張に対して、ちゃんとissuesとpull requestを発行していこうと思う