React Nativeの現場で得た知識をここに記す
はじめに この資料は、社内向け勉強会用に作られたものです。 ここ半年くらい、ReactとReact Nativeを書くお仕事していたのですが、その際ハマったことや便利だと思ったことを書き記しておこうと思います。 これから学ぶ人の参考になればと思います。 ハマリポイント Life Cycleが多すぎてわからない。componentDidMountってなに・・・ とりあえず、LifeCycleを一気に全部覚えなくても、資料見ながらできればOKだと思う。 こちらに、綺麗にまとまっていたので、見てみよう。 参考: React component ライフサイクル図 http://qiita.com/kawachi/items/092bfc281f88e3a6e456 API取得して画面に反映したいけど、いいやり方がわからない 初心者向けの回答 （ 初回呼ぶだけなら）componentWillMoun
ReactNative で Firebase を利用して push notification を配信する - Qiita
ReactNative で Firebase を利用し push notification を送る方法について紹介します。 構成 環境 Android 7.1.1 iOS 10.3.1 Android Studio 2.3.2 XCode 8.3.3 利用サービス Firebase 利用ライブラリ react-native-fcm 実装 Firebase の登録 以下のマニュアルにそって登録します。 Android用とiOS用をともに作成してください。 「Android パッケージ名」と「iOS バンドル ID」に入る「com.example.app」の部分は自分自身が作成しているアプリのものと同じものにしてください。 設定ファイルがそれぞれ作成されるのでダウンロードしておきます。 証明書の準備 Android とくにありません。 iOS 以下のマニュアルにそって準備します。 exampl
React Nativeのデザイン - Stylesheet/Flexbox (part1) - Qiita
React Nativeのアプリはスタイルシートで各コンポーネントの配置、色、フォント等のデザインを決めていきます。Webプログラマなら体に染みついているpadding等を使うので、すぐに慣れると思います。 公式ドキュメントから一覧を見ることができますが、border系は下記のようになります。注意点として、ハイフン(-)で単語を区切るんではなくCamelCaseになっていることです。 borderColor string borderTopColor string borderRightColor string borderBottomColor string borderLeftColor string borderRadius number borderTopLeftRadius number borderTopRightRadius number borderBottomLeftRa
react-native-dotenv で定数を環境ごとに切り替える - Qiita
開発中、環境によって API のエンドポイントの向き先や設定を変更して動作チェックしたい、ということがよくある。 しかしながら、ReactNative では、process.env に渡されるのが基本 process.env.NODE_ENV だけで、かつ内部で development か production に書き換えているため、適当な環境変数を外部から渡して挙動を変えることが、development or production しか行えない。 そのためのアプローチの一つとして react-native-config があり、それについての詳細は以下に解りやすくまとまっている。 React Native で development, staging, production など環境を切り替える ただ、react-native-config では、あくまでネイティブ側に埋め込み、JS 側
React Native で development, staging, production など環境を切り替える - Qiita
基本的に React Native は development か production かしか切り替えができない。 __DEV__ React Native では development かどうかを判別する仕組みとして __DEV__ というグローバルな変数が定義されている。次のページに書いてあるように、 packager に bundle してもらう際、 dev という query prameter に true か 1 を指定したときに __DEV__ = true としてくれる。 これを見て設定を切り替えればいい。 ちなみに Android で cd android && ./gradlew assembleRelease したり iOS で Release ビルドした場合はきちんと __DEV__ === false にしてくれる。 react-native-config と、こ
React Native - Qiita Advent Calendar 2016 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
React Native + TypeScript入門 - Qiita
はじめに 某案件でしばらくReact Native + Flow を使ってたのですが、やっぱりTypeScriptの方がIDEの補完や型安全性の面で良いなと思い、React NativeをTypeScript化してみました。 それぞれのファイルの意味なども可能な限り説明していければと思います。 この記事のゴール React NativeにTypeScriptを入れる Reduxも入れる それらのテストや動作確認をしやすくする。 環境 react: 15.4.2 React Native: 0.41 TypeScript: 2.2 NodeJS: 7.6~ mocha enzyme 構成 今回の構成は以下です。 基本的には、tscでビルドして生成されたファイルをindex.jsに喰わせる形を取っています。 TSのソースマップをdebug時に引き継げてないのが難点ですが、そこはTS2.2から入
React.js × React Native meetup アンケート質問に答えたい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React.js × React Native meetup 申込時にもらっていた質問をパネルディスカッションで答えようとしたものの時間がなくてお蔵入りになってしまったがそれはもったいないので答えていくコーナー。 パネルディスカッションでしゃべった内容とも重複しているところがある。 ↓も参考に。 以降 React Native を RN と略する。 データフロー Web では React/Redux がデファクトスタンダードだが RN ではどうか ? flux データフローを使わずに済む規模であれば導入コストもばかにならないので Rea
React Native 一問一答 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1問１答 React NativeのTipsを、備忘録も兼ねて１問１答形式で記述したいと思います。 開発をする前に気になってたところ、疑問などをを１問１答形式でまとめてみました。 随時アップデート予定です(2016/12/23現在) 編集リクエスト、追加、修正大歓迎です。よろしければお願いします。 基本 React Nativeとは何ですか？ Facebook製のモバイルアプリ向けのフレームワークです。公式 HTMLベースのフレームワークと異なり、Reactで培った仮想DOMを元にネイティブコードを呼び出します。そのため挙動が軽快です。
[翻訳] Bridging in React Native - Qiita
元記事: http://tadeuzagallo.com/blog/react-native-bridge/ 翻訳については https://github.com/januswel/react-native-bridge-ja で管理している。 また、元記事では文字で説明されている部分も含めて実行時の簡単なフローを描いてみた。ここで bundle というのは React Native packager によって bundle されたファイルのこと。 というわけで、以下翻訳。 この投稿では React Native の基礎を知っている方を対象に、ネイティブと JavaScript の通信時における内部の動作へ焦点をあてます。 メインスレッド 何よりも先に、 React Native では 3 つの主要なスレッド1があることを覚えておいてください。 シャドウキュー コンポーネント再配置時に使用
![[翻訳] Bridging in React Native - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f9cb42206cdf356195e7a0fab17fabc2372069cc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjc1MTYlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODUwMzA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjMzOTk2MTRmM2UwZDhlMjNlZTU2MTEyZDMzYmI2MDk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Db157335b3816ddb28a2272922095cd62%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQnJpZGdpbmclMjBpbiUyMFJlYWN0JTIwTmF0aXZlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NzhmNjBlZWRmMzI0NDU2YzA1YTQ4ZTRiNzgyYTQ5NzY%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBqYW51c193ZWwmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0wYjZjY2ZiMWE1MDU5Y2QzZWYzN2MzMWU2Y2FmMzc4Mw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd7fd5cbb1eca00d71ec4c0f92d60877f)
Bitrise と DeployGate で React Native アプリの評価環境を構築する - Qiita
Bitrise でもテストできるので一見 CircleCI はいらないように見えるんだけど、 Bitrise は push / pull request でしか trigger できないので細かい制御、例えばリリース用の tag を付加したときだけ動かしたい場合にやっぱりいる。 Bitrise.io スマホアプリ向け CI サービス。スマホアプリに特化しているだけあってかなり楽に iOS / Android のビルド設定ができる。具体的には次がうれしい。 Provisioning Profile や keystore などをアップロードできるのでセキュリティ的に安心 ↑を github repo に commit しなくてよい Bitrise を信用する必要はある メモリーが足りなかったりビルド時間が長すぎて打ち切られたりがない 少なくともいまのところこれで落ちたことはない UI でぽちぽ
React Native で父親専用 PDF ビューワーを作った - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? PDF ビューワーなんて世の中にゴマンとあるのに、どうしてもうちの父親の要件を満たすアプリが見つからなくて、もう自分で作るかということで作った。 成果物 要件 父親がこれまで作ってきたギターコード付き楽譜 PDF 400 件ほどを素早く一覧・検索・表示できること iPad 第4世代 Wi-Fi モデル iOS 10 で動作すること。特定個人向けなので AppStore になくても OK オフラインで利用可能。 iTunes でファイル共有するやり方はすでに教えてある （この程度の要件なら既製品が見つかりそうなもんだけど、いくつか試したも
React Nativeの設計を考えるシードプロジェクトまとめ - Qiita
概要 Swiftで遊ぼうと思い、最近のアプリエンジニアはどうやって開発してるのかなーと調べたら、どうもReact Nativeがちょいちょいでてくる。 React Nativeのチームは、React Nativeの採用理由について、ビルド時間の短縮やデバッグツールによる開発の効率化のためとも述べている Facebookは全てのアプリにReact Nativeを採用すると言い切っている Airbnb、Microsoftなどが積極的に開発にコミットしている ネイティブでバリバリやってたiOS developerも、開発効率の良さからReact Nativeに乗り換え始めている 昔見たときと印象が変わっているように感じたので、React Nativeのプロジェクト構成を考えるためのシード一覧をこちらにまとめてみた。 一覧 Ignite ★3281 The unfair starting CLI,
React Native 開発のススメ - Qiita
2016 年になって React Native 開発が現実的な選択肢となってきたので、 advent calendar の締めとしてメリット・デメリットの整理と、はじめるための諸情報をまとめる。 メリット React Native の利点だと言われる次のことを詳細に。 実行速度が速い 開発速度が速い OSS 開発要員の確保が容易 実行速度が速い よく聞かれたり、ハナシが噛み合わないときに確認したらそうだった、ということとして「 WebView 上で動くから遅いんでしょ ? 」ということがある。たぶん Cordova あたりを思いだして言っているのかなと思いつつも、既存の JavaScript によるモバイル開発の感覚はまったく役に立たないという返答をしている。 どのくらいサクサク動くのかという例として既存のアプリをみてもらうのがはやいので、次のアプリをインストールしてスクロールしまくってほ
SIの現場のiOSアプリケーション開発 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どうも、SIerのシステムエンジニアです。 システムエンジニア Advent Calendar 2016の11日目です。 10日目は deaf_tadashiさんの「聞こえないシステムエンジニアが心がけていること」でした。 はじめに 直近は金融系の新サービスのバックエンド側の開発をしていました。 会社で利用する言語はほとんどJavaで、iOSだとObjective-Cを遊び程度でさわったことがある程度です。 現在チームメンバーは5人で、スクラムで開発を進めています。 ※ 厳密にはふつうの受託開発のやりかた をチームに合わせて拡張したもの
React Native 2016 年の動き - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React Native とは ? 一発目なので簡単な紹介から。 React.js と同様、仮想 DOM で UI を記述できるモバイルアプリ作成用の JavaScript フレームワーク。特徴としては次のようなものがある。 EcmaScript 2015 宣言的 コンポーネント指向 CSS ライクなスタイル指定 flow による型チェックサポート 公式で取り上げられている使用例は次にまとめられている。 思想は次のページで説明されている。これは去年の記事。 重要だと思う点をとりあげる。 keep development velocity
FacebookまじでReact Nativeやるってよ！ - Qiita
最初に タイトルは釣りです。いや、釣りでもないかw アプリ開発はReact Nativeを使ってます。 React.jsの手馴染みが良く、 "learn once, write anywhere"をうたっているReact。 延長線でかけるReact Nativeはかなり良いです。 Coiney(窓口)さんの様に、プロダクトに導入されている事例もちらほら出てきてます。 また、Facebookは初期から、React Nativeを使った Facebook Groups、Facebook Ads Managerを開発しており、開発言語だけにとどまらず、プロダクトでもリードをしてくれています。 でもやっぱり不安。。。 しかし、ただ。ただ。。。やっぱり不安がありました。それは。。。 本命のFacebook AppがReact Nativeではないこと!! Facebook appはおそらく世界中で一
react-native-web はクロスプラットフォームを加速するのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? A Glimpse Into The Future With React Native For Web という記事を読み、react-native-webというプロジェクトを知りました。 本記事では、この技術の概要と自分の意見を書きます。 react-native-webの概要 より抽象化されたViewでWebアプリを書ける React Nativeで書いたコードはiOS、Androidに対応する。 このコードがそのままWebで動くとよいのでは？という発想で作られたライブラリ。 *「ReactはもともとWebの技術じゃないか」*というな
JSでもモバイルアプリらしい体験は実装できるのでしょうか？ with React Native - Qiita
アニメーションはモダンなアプリ体験に不可欠なものになってますよね。 手のひらのなかのツールの使い心地に鈍感な人は減ってきてるのではないでしょうか。 JSでモバイルアプリを作る時、「アニメーションは実装できるけど、カクカクしてたりして、それないほうが良いよね」みたいな話になったことはありませんでしたか？ 僕もTitanium,Ionic Frameworkと触ってきて、こういうフレームワークは割りきって使うものという印象をずっと持ってました。 ただ、去年React Nativeを使ってiOS, Androidアプリ（短歌を投稿するSNSアプリです）をリリースしてみて、とても気に入って、今回アニメーションやらインタラクション、どこまで出来るのが実験的にアプリを出してみました。 Phrasal Verbs Flashcard 最近ロンドンに来て、英語学習者の友達が増えたのもあって内容はFlash
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native for Androidでアプリを作る - Qiita
