ReactNavigation(v5) MaterialTopTabNavigator のインジケータのカスタマイズ
はじめに
ReactNavigationのMaterialTopTabNavigatorのカスタマイズ方法がdocに載っていなかったのでメモ。
ReactNavigation Doc :TabNavigatorConfig
やったこと
書いたコード
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のブラウザ対応について
とりあえず公式ドキュメントを読んでみた
Nuxt.js は PostCSS Preset Env を適用しました。デフォルトでは、Stage 2 features と Autoprefixer が有効になっています。build.postcss.preset を使うことで設定が出来ます
ん???
Autoprefixerとは
必要なベンダプレフィックスを自動で付けてくれる便利なツール
ん?????
まとめ
Nuxt側のAutoprefixerが自動でプレフィックスを付与してしてくれるので、手動でのプレフィックスの設定はいりませんでした!!
Androidのエミュレーターからlocalhostへアクセスしたい
Androidのエミューレーターで突然のエラー
はじめに
Expoで実装時にAndroidのエミュレーターを立ち上げると突然のエラー。 iosの環境では正常に立ち上がるのではてさて・・・
環境
- Expo v37.0.8
- AndroidStudio v3.6.3
エラーの挙動
Run on Android device/emulator で立ち上げるとAndroidの画面に。
Something went wrong.
めげずにリロードするも
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の場所を確認
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
ボタンをクリック
(※ここではシミュレーターの設定は省略)
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のルールを使用
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
使用しないファイル削除
まずは、「いつか使うけど、今はいらない」ファイルを消していく
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
にアクセスしてみる
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を入力
http://192.168.000.001:3000