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 アプリ
- エラー画面
原因と解決策
原因
12/2学んだこと
kaggle
Porto Seguroコンペ終了。
calc列の特徴をすべて排除してxgb(discussionに出てたらしい), one hot encodingをして必要な特徴のみ組み入れるようにする、denoising auto encoderを用いたnormalizeののちにneural netに入力(?。ここはより具体的な処理はわかっていない)といった取り組みを上位陣は行っていたよう。
- 1st place
https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44629
- 2nd place
https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44558
- 3rd place
https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44608
javascript
- eslint
.jsの静的解析を行える。
npmもしくはyarnでeslintとそれに関連するパッケージを入れる。このままだと「node_modules\.bin\eslint {source.js}」としなければ解析ができないが、Atomで書きながら解析実行するためには以下のパッケージを入れる。
apm install intentions busy-signal linter-ui-default linter linter-eslint
- webpack, es2015
es2015で記述されたjavascriptをwebpackを用いて現在多くのブラウザで使用できるe5形式に変換する、といった使い方。
package.jsonのscriptsにbuildコマンドとして「node_modules\\.bin\\webpack.cmd」を、startコマンドとして「node_modules\\.bin\\webpack-dev-server.cmd」を追加しておくと便利。
- editorconfig
プロジェクトフォルダに「.editorconfig」ファイルを用意しておくだけで、対応したeditorに設定を加えられる。
どのエディタを使うにしても設定を共有したいといった場合に便利。
Atomでは、packageとして「editorconfig」を追加すると使用可能。