React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
Chart.jsなどのWeb用のJSライブラリをReact Nativeで使う - ぴよログ
React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓ JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊 とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。 WebにもJSのチャート系ライブラリはいくつかあります。例えば有償のHighchartsなんかはかなり協力です。これから登場するChart.jsのようにMITライセンスのものもあります。 そういったWebのライブラリを使ったほうが案外良い結果になることもあるかも、という提言として今回の例を紹介してみます。 React NativeにはWebViewがあるため、Javascriptを有効にした状態で通常のWeb
React NativeでMarkdownを表示する方法をいくつか比較してみた - PIYO - Tech & Life -
GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemottyでもMarkdownのような記法を一部サポートしています。 WebでMarkdownを扱うにはMarkdown形式の文字列をサーバーサイドなりクライアントサイドでHTML化して表示するだけなのでとても簡単です。また、 ただのHTMLなのでCSSにより見た目もかなり柔軟に変えることができます。 ではReact Nativeアプリではどうしたらいいだろうか、というのが最近の課題です。実はRemottyのモバイルアプリでちょっとしたマークダウン的なものをどのように表示すべきなのかというのは悩んでいて、現状では開発した当時一番マシかなと思ったものを使っています。 Markdownを表示するためにライブラリ（または標準コンポーネント）を使います。使い方には大き
MobXでTodoアプリ[Part1] MobX導入まで - PIYO - Tech & Life -
3部作のPart1です。 MobXでTodoアプリ[Part1] MobX導入までMobXでTodoアプリ[Part2] データを保存してみるMobXでTodoアプリ[Part3] Storeをデバッグしてみる以前も書いたように、ここ1年ほどReact Nativeによるアプリ開発を時々行っています。凝ったアプリでなければ割とサクッと作れるのが良いです。 さてReact Native（というかReact）単体だとデータ管理が面倒、バケツリレーが云々という話がよくあります。その問題に対応すべく色々なFluxなフレームワークが存在していて、中でもReduxがよく使われるようになったという流れが2年前ぐらいにあったと記憶しています。 そういう流れで僕もReduxを使ってアプリ開発をしていましたが、ここ数ヶ月MobXというのをよく聞くようになりました。データ管理の用途だったらMobXで十分だよとい
![MobXでTodoアプリ[Part1] MobX導入まで - PIYO - Tech & Life -](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf9dc72e3f5a831c21b79dda771b7692abd8544b/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fy_i9fp87K99TSZkeLX2ZqCVu9aZ_itzXBB_AI90I1mycnWj72EQPc8YAlSOhDnWqOR-Tq2TNtMf1dIIwIB41o-tEjMH1Ahn90cPMyM-T83elsZBhs66peHCP2VfVWTT4R0OYwI65EU58kiApaDCGtXZLbQpBpg8mw4amb_Pu0o83H9sPVmkb8vDO08dFJoAeBghTwl0RJZFBzLPAvEo1yySRpKa1haI95sy4tF0fQD3H0VZF7yenhWdUvJtHk86DqtZGGZxA1KDPKFQ0MGBn6Q6vM785kgN1rWzWHxjmehqWLagVnwbhhBSukD-6rTB00p714JTqnff0BIK411edZRmzPaCaPzEbeM_i6WmbR6LcWPn-J5U7qn2O5GFjTpNF8ef0gvqD0dww9pNYC6yU1aFoyac9A1BVBzCHO5OoUgOVqn3PzE0fIv_J4twqGMYW2X34-yi11r2ZLbw9bbBGbz4lsuWSoGAyrMPvdwOPGG9eFn5MsLIK_-fMRmSDGeaDTi4yBa4-jw2xAy4HSi1VBSZkThJEuqm8nQdjd1u1Fz2cAtg2rVAdOfomS7FmFR_3i8UxLTUtNtU55U9Yc5wLwtZDOYz80cMG3PEP5g-5sYTEsOQ-fhil_IVIzdI-TCO2bmvTsvO0EwcM9SZXjZnEDFMANWVUPGfq3g%3Dw1200-h630-no)
【随時更新】2018年にReact Nativeを始める人におすすめ26選 - Qiita
ちょうど1年くらいにReact Nativeでちょっとしたアプリを作っていたのですが、最近はめっきり離れてしまっていました。Reactもv16になり、少し開発環境も変化しているかなと思っていたら・・・結構変わっていました。 React Native Showcaseを見ると、FacebookやInstagramはもとよりAirbnb, Skype, Tesla, Walmart, Wix, UberEATSなど日本でも有名な企業やサービスの採用が目立っています。 showcase 今回は良く使いそうなツール・コンポーネント・サービスを集めてみました。 随時更新もしていきたいと思います！ 1. Expo https://expo.io/ ExpoはReact Nativeの開発をサポートするツールです。 主に以下を提供してくれています。 Expo XDE、Expo exp Expo Modu
React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話 - PIYO - Tech & Life -
前置き僕が所属しているソニックガーデンではRemottyというツールを自社で開発し、普段の業務に使っています。リモートワークをするためにオフィスと言ってもいいような場所で、業務中は常にオンラインとなり、リアルタイムチャット（対面の会話の代替）とトピックベースの掲示板（メールなど非同期コミュニケーションの代替）の両方を備えたオフィスとなるようなツールです。 オフィスにいられない間にもチャットや掲示板に反応できるように、iOSとandroidそれぞれにネイティブアプリのクライアントアプリがあり、それぞれを別の開発者が担当していました。iOS版はその当時新卒2年目だった若者が作ったものを僕が引き継ぐ形でメンテしていました。 もともと自社向けに開発していたプロダクトではありますが、働き方改革の流れなどの関係もあってここ1年〜2年ぐらいの間に有償で使ってくださるお客さまが出てきました。 そうなってく
React Native でアプリ開発！初心者のための実装 Tips - Qiita
エイチームライフスタイルアドベントカレンダー2017、3日目です。 本日は株式会社エイチームライフスタイルの、エンジニア兼ソース顔担当の @maa0984 がお送りします。 入社間もない頃に先輩社員から「顔がアルパカに似てる」と言われて以来、トレードマークにしています。 最近英語を勉強しようと、英語のフレーズをリスト化して表示するアプリを作りました。 せっかくなので、興味がありつつも手を出せていなかった React Native に挑戦しました。 初めて使用するため手探り状態でしたが、その中で『やりたかったこと』と『それを実現させた方法』をいくつかピックアップしてお伝えします。 React Native でアプリ作りを始めてみようとしている方に、何かの参考になれば幸いです。 対象バージョン react-native: 0.49.3 react-native-swipeout: ^2.2.2
ReactNativeでiOSとAndroidの漫画アプリを同時に作る | Nagisaのすゝめ
はじめに NagisaでiOSエンジニアをしている伊藤です。 今回はReactNativeというスマホアプリのクロスプラットフォーム開発ツールを使った取り組みについて紹介をしたいと思います。 アプリのクロスプラットフォーム開発といえば、以前ではTitaniumやCordovaといったWebViewをベースとしたアプリをイメージするものが多く、純粋なネイティブアプリに比べるとどうしてももっさりとした感覚になってしまい、あまり採用されることはなかったように思います。 ReactNativeではこのもっさりとした感覚はなく、とてもスムーズに動作するアプリを作れます。その理由はWebViewを使用せず、ビューやラベル、スイッチなどで本当のネイティブコンポーネントを使った画面が構成されるところにあります。これにより国内でもにわかに人気が出てきています。 UPTOON!のReactNative化 UP
[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita
[React Native入門完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 この記事で説明する事 React Native採用に係る意思決定の話 atom + eslint + flowによるIDE風開発環境 line by lineによるプロジェクト作成方法とリリース方法 デバッグ方法やtips集、補助ツールの使い方 React Nativeとは Facebookがオープソースとして開発するReact.jsの思想の一つである「Learn once, Write everywhere」（元ネタはもちろんJavaのWrite once, Run anywhere）を体現した、Facebookが開発主体となるプロジェクトの一つで、要はJavascriptとReactフレームワーク1つでモバイルアプリ（iosとAndroid）を作れる、といった代物です
![[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd8432893c7bb0d7c1100348e2d1c5ff6bb8ae41/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCUmVhY3QlMjBOYXRpdmUlRTUlODUlQTUlRTklOTYlODAlRTUlQUUlOEMlRTUlODUlQTglRTclODklODglNUQlRTMlODAlOEMlRTMlODElODQlRTMlODElOEQlRTMlODElQUElRTMlODIlOEElRTMlODMlODclRTMlODMlQkMlRTMlODMlODglRTMlODAlOEQlRTMlODElQUUlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTJSZWFjdCUyME5hdGl2ZSVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5NyVFMyU4MSU5RiVFNyU5RiVBNSVFOCVBNiU4QiVFMyU4MiU5MiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MSVCRSVFMyU4MSU5OSVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yzg4Nzg0NmQwM2I0NmE0OWI1YjljZDQ5N2UwMGNjZTY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29nb3RhbmFrYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjRiZDU0YWRmMDJhMWI2NmFhYzE4OTBlOThkNDY5MWM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dda33fbe74e8524cb2321b6da1f8834d5)
How to make mobile app with Firebase and React Native
DevFest 2017 FirebaseとReact Nativeでのモバイルアプリの作り方 @k2wanko https://tokyo.gdgjapan.org/
ReactNativeでアプリを作る時の個人的な最小構成 - Qiita
React Nativeで開発をはじめる時の設定とディレクトリ構成をメモ。 一応個人的な構成としては、 routerはreact-native-router-fluxを使う 状態管理にreduxを使う 非同期処理にredux-sagaを使う airbnbのスタイルをカスタムしてeslintを使う Flowで最低限の型は保証する という感じ。 もしReduxいらない場合は、Redux関連のライブラリインストールとディレクトリ作成は省く。 ディレクトリ構成の例としてはこんな感じで。Redux使うバージョン。 index.ios.js index.android.js src |__actions |__hoge.js |__saga |__hoge.js |__reducers |__index.js |__hogeReducer.js |__components |__hogeScreen
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 / 複数要素の同時タップをハンドリングしたい時
ボタン2つ押したら何かする、みたいな時です。 Touchable TouchableHighlight は同時に2つタップするということができないみたい。 片方タップしたらもう片方は反応しなかった。 class MyComponent extends Component { constructor(props) { super(props); this.state = { text1: 'text 1', text2: 'text 2', text3: 'text 3' }; } render() { return ( <View> <TouchableHighlight onPress={() => { this.setState({ text1: 'touch started' }); }}> <Text>{this.state.text1}</Text> </TouchableHig
React Native Animations Using the Animated API
Looking to learn React Native? Check out React Native Training. The recommended way to animate in React Native for most cases is by using the Animated API. The final github repo for this project is here. There are three main Animated methods that you can use to create animations: Animated.timing() — Maps time range to easing value.Animated.decay() — starts with an initial velocity and gradually sl
React Nativeアプリを爆速で作れるツールCRNAを試してみた - Shoya blog
React Native BlogでCRNAが発表されていて モック開発用？Production投入できるの？ と気になったので試してみました。 facebook.github.io CRNAとは Create React Native App の略称で、Facebook(React Community) からリリースされた React Nativeの開発を支援するためのツールで XcodeやAndroid Studioを使用すること無く(！) React Nativeで書いたコードを実機で動かすことが可能です。 there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using t
React Native ScrollView animated header
Update: Changed the project source to use Expo and changed the structure a little bit to use transforms instead of height to be able to leverage the native driver. See this commit for the changes I made. Here’s a walkthrough that shows how to build a header that is animated with the scroll position of a ScrollView. I had to build something similar for an app and found out that it was really easy t
「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査
React Nativeとは？ 鎌倉正也（以下、鎌倉）：それでは、始めさせていただきます。「フロントエンドエンジニアがReact Nativeを触ってみた」というタイトルで発表させていただきます。鎌倉と申します。 まずは、自己紹介なんですけれども。普段はフロントエンドエンジニアとして、ReactとかReduxとか使って、Webアプリを使っております。今年の1月くらいから、React Nativeの調査を始めまして、今日に至るという感じです。 そして今日のアジェンダですね。今日の内容は、React Nativeについてという話と、なぜReact Nativeを調査し始めたのかというのと、React Nativeのアーキテクチャの話。あとは、デモのアプリも作っていたので、その紹介を少ししようかなと思っています。 まずは、React Nativeについてなんですけど。ご存知の方もけっこういると思
ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート - Qiita
はじめに 個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。 今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。 あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも
Under the hood of React Native
Facebook's Engineers working on React Native seem to be eating, sleeping and breathing it. Not only they look proud (rightfully so) and passionate about React Native, but they're also sharing their precious experience and engaging its amazing community. Under the hood of React Native (Martin Konicek) Bridging in React Native (Tadeu Zagallo) React Native: Under the Hood (Alexander Kotliarskyi) © Co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
