Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
どんなエラー？
- eslintの出す警告
- 期待する改行コードが"LF"にも関わらず、"CRLF"が改行コードとなっている場合に発生。
解決策
大きく2つある。
Editorで使用する改行コードを"LF"に変更する。
「.editorconfig」に以下を追記。
[*] end_of_line = lf
期待する改行コードを"CRLF"にする
「.eslintrc.js」に以下を追記
module.exports = {
"extends": "airbnb",
"rules": {
...
"linebreak-style": ["error", "windows"], //この行を追記
},
};
最新モデル Apple MacBook Pro (13インチPro, Touch Bar, 1.4GHzクアッドコアIntel Core i5, 8GB RAM, 256GB) - スペースグレイ
- 発売日: 2019/07/10
- メディア: Personal Computers
How to solve the failure with react-native run-android
Error Message
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:preparePocketsecReactNativeVectorIconsUnspecifiedLibrary'. > Could not expand ZIP '${your_application_path}\node_modules\react-native-vector-icons\android\build\outputs\aar\react-native-vector-icons-release.aar'. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED Total time: 14.768 secs Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/android-setup.html
ES6(javascript)でリスト内包表記
リスト内包（内包されてないけど）で、1行で良い感じに配列を作れる。
書き方
const data = [...Array(10).keys()].map((d) => { return d * 2; });
// [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]
注
上記の書き方では、ESLintに怒られる。
eslint.org
React Nativeをブラウザでデバッグする
前提
- Windows 10
- Android
- Emulator上で実行することまではできている(react-native run-androidできること)
- Google Chromeインストール済み
手順
- Chromeで以下にアクセス
http://localhost:8081/debugger-ui/
- Android Emulator上で「Ctrl + m」→ 「Debug JS Remotely」
- react-native run-android実行
.jsファイルにJSXを書いても怒られないようにする
なぜやるか
- React Nativeでは、.jsxを扱えないため、.jsファイルにJSX記法を書く必要がある（2018/1/3現在）
前提
- 既に、.eslintrc.jsが存在するものとする（つまり、eslint --initは実行済みであること）
手順
- .eslintrc.jsを以下のように修正
module.exports = {
"extends": "airbnb",
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
};
Network response timed out.
何の記事？
下記の記事の通り「create-react-native-app」を用いて、React Nativeの開発環境を作成していたところ、タイトルのエラーが発生し、Android端末からアプリの動作確認ができなかったため、その解決策を記載しておくもの。
動作環境
- 開発環境：Windows 10 Pro
- Node: v8.2.1
- NPM: 4.6.1（2017/12/17現在、NPMv5はReact Nativeのサポート対象外で、NPMv5だとcreate-react-native-appコマンドが完了できない）
エラーの発生状況
再現手順
- 開発環境で以下コマンドを実行(すでにcreate-react-native-appはインストール済みとする。)
create-react-native-app sample-app cd sample-app npm start
- 事前にExpoアプリインストール済み
Expo - Google Play の Android アプリ
- エラー画面
