みくろん備忘録

あうとぷっとのおまじない

ReactNavigation(v5) MaterialTopTabNavigator のインジケータのカスタマイズ

はじめに

ReactNavigationのMaterialTopTabNavigatorのカスタマイズ方法がdocに載っていなかったのでメモ。

ReactNavigation Doc :TabNavigatorConfig

reactnavigation.org

やったこと

f:id:micronn:20201107173256p:plain

書いたコード

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Text, View, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const Tab = createMaterialTopTabNavigator();

const Tab1Screen = () => {
  return (
    <Text>タブ1画面</Text>
  )
}

const Tab2Screen = () => {
  return (
    <Text>タブ2画面</Text>
  )
}

export const TopTabNavigator =  () => {
  const renderIndicator = (route) => {
          if (!route.getTabWidth()) {
            return null;
          }
          return (
          <View style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
            width: route.getTabWidth(),
            height: '100%',
            left: route.navigationState.index * route.getTabWidth(),
          }}>
            <LinearGradient
              colors={['blue', 'red']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={styles.gradient}
            />
          </View>
        );
  };

  return (
    <Tab.Navigator tabBarOptions={{
      renderIndicator: renderIndicator,
    }}
    >
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  gradient: {
    width: '100%',
    position: 'absolute',
    height: 2,
  }
});

Nuxt.jsでレイアウトをIE11対応しようとした

はじめに

突然のIE対応。今までブラウザ対応とは縁のない生活だったので、学んだことのメモ。

Nuxtのブラウザ対応について

とりあえず公式ドキュメントを読んでみた

ja.nuxtjs.org

Nuxt.js は PostCSS Preset Env を適用しました。デフォルトでは、Stage 2 features と Autoprefixer が有効になっています。build.postcss.preset を使うことで設定が出来ます

ん???

Autoprefixerとは

必要なベンダプレフィックスを自動で付けてくれる便利なツール

ん?????

まとめ

Nuxt側のAutoprefixerが自動でプレフィックスを付与してしてくれるので、手動でのプレフィックスの設定はいりませんでした!!

Androidのエミュレーターからlocalhostへアクセスしたい

はじめに

ReactNative(Expo)の開発時にローカルで立ち上げたモックサーバーにアクセスしたかった。 iosの方は特に設定せずにアクセスできたのだが、Androidがうまくいかなかった。

Androidエミュレーターでプロキシを設定

  • 10.0.2.2を設定してあげるのが良さそう

araramistudio.jimdo.com

f:id:micronn:20200515144248p:plain

  • http://10.0.2.2:3000 でアクセス。:以降はポート番号指定 f:id:micronn:20200515144455p:plain

Androidのエミューレーターで突然のエラー

はじめに

Expoで実装時にAndroidエミュレーターを立ち上げると突然のエラー。 iosの環境では正常に立ち上がるのではてさて・・・

環境

  • Expo v37.0.8
  • AndroidStudio v3.6.3

エラーの挙動

Run on Android device/emulator で立ち上げるとAndroidの画面に。 f:id:micronn:20200515115755p:plain

Something went wrong.

めげずにリロードするも

f:id:micronn:20200515115923p:plain

Error: The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo. Visit https://docs.expo.io to learn more about developng an Expo project.

対処法

SDKの場所を確認

  • Configure→SDK Manager f:id:micronn:20200515121336p:plain

  • sdkの場所を確認 f:id:micronn:20200515121557p:plain

DNSの再設定

cd /Users/username/Library/Android/emulator
./emulator -list-avds
Pixel_3a_API_R
  • DNSサーバーの指定
./emulator -avd Pixel_3a_API_R -dns-server 8.8.8.8

復活!!

Expo + TypeScript で Eslint と Prettier を設定するまで

はじめに

Linterの設定はいつも大苦戦、、、いつかの私に捧ぐLinterの設定メモ

Expo

ExpoのCLIをインストール

 npm install -g expo-cli 

インストール完了

expo --version
3.17.24

Expoのプロジェクト作成

後入れしたかったのでここではあえてTypeScriptは選択しない

$ expo init expo-app
? Choose a template:
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

Expoプロジェクト立ち上げ

プロジェクト作成が終わったら、早速立ち上げてみる

cd expo-app
npm run start

localhostでExpoの画面が立ち上がるので、Run on iOS simulator ボタンをクリック
(※ここではシミュレーターの設定は省略) f:id:micronn:20200425150228p:plain

TypeScript

インストール

npm install --save-dev typescript

configファイルを追加

プロジェクト配下にconfig.jsonファイルができる

tsc --init

tsconfig.jsonをゆるっと設定

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": false
  }
}

型定義等追加

npm install --save-dev @types/react @types/react-native @types/expo

Appの拡張子もなおしておく

mv App.js App.tsx

TypeScriptを導入したをExpoプロジェクト立ち上げる

npm run start

エラーも出ず、先ほどと同じ画面が立ち上がればOK

EsLint

さてここからが本番

Eslintを導入

npm install --save-dev eslint

設定ファイルを作成

Eslintの設定ファイルをつくる

./node_modules/.bin/eslint --init

流れにそって設定

? How would you like to use ESLint?
   To check syntax only
❯ To check syntax and find problems
   To check syntax, find problems, and enforce code style
? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
? Which framework does your project use?
❯ React
  Vue.js
  None of these
? Does your project use TypeScript? (y/N) N
? Where does your code run?
❯◉ Browser
 ◉ Node
? What format do you want your config file to be in?
❯ JavaScript
  YAML
  JSON
? Would you like to install them now with npm? (Y/n) Y

最後まですすむとプロジェクト配下にeslintrc.jsファイルが爆誕

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

スクリプトの設定

package.jsonに追加

  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint ./ --ext .jsx,js,tsx"     // 追加
  },

これでnpm run lintでlinterのチェックをしてくれるはず

ライブラリを導入していく

npm install --save-dev eslint-config-airbnb

今回はairbnbというEslintのルールを使用

www.npmjs.com

npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

TypeScript系

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

Prettier系

npm install --save-de prettier eslint-config-prettier eslint-plugin-prettier

configファイルに追加

eslintrc.jsに設定を書き加えて完成 ルールはお好みでどうぞ!

module.exports = {
  env: {
    "browser": true,
    "es6": true,
    "node": true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "airbnb",
  ],
  globals: {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  parserOptions: {
    "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 2018,
  "sourceType": "module"
  },
  plugins: [
    "react",
    "@typescript-eslint",
    "jsx-a11y",
    "import",
    "eslint-plugin-prettier",
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'es5',
      },
    ],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", "ts"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
  },
  settings: {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".json",
          ".ts",
          ".tsx"
        ]
      }
    }
  }
};

Reactを最小構成で動かす

はじめに

クラスもコンポーネントとりあえず置いて、まずはうごかしたい・・!!

Reactを最小構成で動かす

Reactをインストール

Reactをグローバルにインストールした後に。

npx reate-react-app react-todo
yarn start

ja.reactjs.org

使用しないファイル削除

まずは、「いつか使うけど、今はいらない」ファイルを消していく

src/App.js
src/App.test.js
src/App.css
src/index.css
src/logo.svg

削除されたファイルを参照しているところがエラーとなるので、全部消す

コードをぺろっと書く

src/index.js

import React from "react"
import ReactDOM from 'react-dom'

const name = 'micronn';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

ブラウザ

localhost:3000にアクセスしてみる f:id:micronn:20200314161107p:plain Hellooooooooooooooooooooooo(゚▽゚)

ローカル環境で立ち上げているNuxt.jsの画面をスマホで確認する

はじめに

いつもローカル環境をスマホで確認するときに、 特に設定等をしていなかったのにNuxt.jsだとうまくいかなかった

ローカル環境で立ち上げたNUxt.jsの画面をスマホで確認する方法

PCとスマホを同じwifiに接続する

システム環境設定>ネットワークでIPアドレスを確認する
ファイアウォールもオフに設定しておく

ホスト名とポート番号を指定

package.jsonを編集 --hostname にはIPアドレスを入力、--portでは立ち上げたいポートを指定

"scripts": {
  "dev": "nuxt --hostname 192.168.000.001 --port 3000",

あとは立ち上げるだけ

npm run dev

スマホでURLを入力

PCと同じwifiにつなげたスマホでURLを入力

http://192.168.000.001:3000

参考公式ドキュメント

ja.nuxtjs.org