2020-11-07

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,
  }
});

2020-08-05

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

Nuxt.js css ブラウザ IE

はじめに

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

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

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

ja.nuxtjs.org

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

ん？？？

Autoprefixerとは

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

ん？？？？？

まとめ

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

2020-05-26

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

ReactNative Expo Android AndroidStudio

はじめに

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

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

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

araramistudio.jimdo.com

f:id:micronn:20200515144248p:plain

http://10.0.2.2:3000 でアクセス。:以降はポート番号指定

2020-05-26

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

ReactNative Expo Android AndroidStudio

はじめに

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
sdkの場所を確認

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

復活！！

2020-04-25

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

JavaScript TypeScript ReactNative Expo 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"
        ]
      }
    }
  }
};

2020-03-14

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(ﾟ▽ﾟ)

2020-02-28

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

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

はじめに

ReactNavigation Doc :TabNavigatorConfig

やったこと

書いたコード

はじめに

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

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

Autoprefixerとは

まとめ

はじめに

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

はじめに

環境

エラーの挙動

対処法

SDKの場所を確認

DNSの再設定

はじめに

Expo

ExpoのCLIをインストール

Expoのプロジェクト作成

Expoプロジェクト立ち上げ

TypeScript

インストール

configファイルを追加

型定義等追加

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

EsLint

Eslintを導入

設定ファイルを作成

スクリプトの設定

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

configファイルに追加

はじめに

Reactを最小構成で動かす

Reactをインストール

使用しないファイル削除

コードをぺろっと書く

ブラウザ

はじめに

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

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

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

スマホでURLを入力

参考公式ドキュメント

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