React Native for WebとExpoを組み合わせてピコピコさせてみたよ - Qiita
なかざんです。ウォーターセルという新潟の会社でアグリノートという農業向けアプリを作っています。 業務で使う構成のPoCとして、Webとモバイルネイティブの両方で動く、React Nativeのサンプルプロジェクトを作ってみたので、そこで得られた知見をご紹介します。 つくったもの 私たちが愛してやまないJetBrains製IDEのアイコンとボタンを並べて、ボタンを押すと製品ページに行けるアプリです。押したときにはピコッと鳴ります。 ソースコードはこちら。 https://github.com/Nkzn/react-native-multi-target-sample ネイティブ版はこんな感じです。 Webアプリ版はこんな感じ。 見てもらったほうが早い 今回は実物を触ってもらいやすい環境が作れたので、実際に触ってみたほうが雰囲気がつかみやすいと思います。 ネイティブ版 ネイティブ版はExpoで
new FirebaseとReact NativeでiOS, Android向けチャットを５分で作る - Qiita
Firebaseが新しくなりましたね！ せっかくなのでFirebaseの強みを活かして、リアルタイムなチャットアプリを作成してみましょう！React Nativeを活用して、iOS版とAndroid版を同時に作ります！ 素早く（気持ち的に５分くらい）作ることを目標にするので実用性は無視します(/･ω･)/ 1. Firebaseプロジェクトを作る。 新しくなったコンソール画面から新プロジェクトを作ります。適当な名前をつけて下さい。 https://console.firebase.google.com/ 2. Databaseのセキュリティを変更する。 さて、作成後はプロジェクトの詳細画面に飛ばされてたと思います。 次にDatabaseのセキュリティを設定します。 Firebaseはエンドポイントさえ指定すればマルチプラットフォームで使えてしまいます。 その代わりセキュリティルールを指定し
ReactNativeでiOSとAndroidの漫画アプリを同時に作る | Nagisaのすゝめ
はじめに NagisaでiOSエンジニアをしている伊藤です。 今回はReactNativeというスマホアプリのクロスプラットフォーム開発ツールを使った取り組みについて紹介をしたいと思います。 アプリのクロスプラットフォーム開発といえば、以前ではTitaniumやCordovaといったWebViewをベースとしたアプリをイメージするものが多く、純粋なネイティブアプリに比べるとどうしてももっさりとした感覚になってしまい、あまり採用されることはなかったように思います。 ReactNativeではこのもっさりとした感覚はなく、とてもスムーズに動作するアプリを作れます。その理由はWebViewを使用せず、ビューやラベル、スイッチなどで本当のネイティブコンポーネントを使った画面が構成されるところにあります。これにより国内でもにわかに人気が出てきています。 UPTOON!のReactNative化 UP
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
NativeBaseをはじめとするUI関連のライブラリを活用してReactNativeでUIサンプルを作成した際の詳細解説 - Qiita
※サンプルではRedux不使用の為、ステートの管理はそれぞれのコンポーネント内で行っています。 ※サンプルのpackage.jsonの記載の中でreactのバージョン設定の部分とreact-native-router-fluxに関してはバージョンを固定する為に^(キャレット)を外しています。 ★2-3. 今回使用したサンプルの画面設計図 こちらはおまけになりますが、今回のサンプル実装に関する設計図になります。 あまりReactNative特有の処理はほとんどないのでUIモックに近い形になってはいますが、ご参考になれば幸いです。 3. NativeBaseの基本概要について こちらはiOS/Androidでの端末によるデザインの違いをよしなにすることができるUI Component Libraryになります。 このライブラリで提供されているコンポーネントに関しては、基本的にはReactNat
React NativeでiOS, Androidのストア公開のTips - Qiita
最初に 忘れてはいけない、でも目を背けがちなストア公開を記事にします。 私の場合ですが、web案件がメインだったため、社内に詳しい人物がおらず調べながらストア公開をしました。 また、ReactNativeをやるということは、何かしらWeb開発の経験がある人が多そう。共通課題と思っています。 私の場合、 RNで知見が少ない そもそもWeb開発がメインだからストア公開とかヤベェ。 iOSはやったことあるけど、Android知らねえや(一方のみ) などで、事前に時間がかかるだろうと、2週間程度余裕を見まして、開発と並行してリリース準備を進めました。 Tipsとして残したいと思います。 尚、記憶を頼りにソースを見て書いてます。間違い&指摘があればすみません。すぐに直します。 今回は以下を前提としています。 開発環境 Mac OS X El Capitan React Native ver 0.28
React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」
今月の13日と14日に米カリフォルニア州のサンタクララでReact Conf 2017というReactのカンファレンスが行われました。このタイミングで発表されたのが、今回紹介する「create-react-native-app」です。Reactの「create-react-app」と同様コマンド一発でReact Nativeアプリの開発環境を構築してくれるツールです。これは、これまでなかなか手の出しにくかったReact Nativeアプリの開発を大きく変えてくれる画期的なツールとなるでしょう。今回はこの「create-react-native-app」の使い方を紹介したいと思います。 create-react-native-appとはReact Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブア
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？ - Qiita
最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn once, write anywhere"でレバレッジが効いていて、 優秀なWeb技術者(React)がアプリ開発に渡りやすかった ナレッジがたまり易いチーム構造に変えることができた ため、置き換えコス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NativeBase: Universal Components for React & React Native
React Nativeが 楽しく感じるまでの話