React Native v0.57がTypeScriptに対応したらしいので動かしてみた - Qiita
v0.57でいろいろ変わるという記事を書きましたが、本当にMetro BundlerがTypeScriptを食べてくれるのか半信半疑だったので、実際に試してみました。 結論 ビルドだけならゼロコンフィグに近い感じで行けました。型チェックをする場合はMSのブログでのやり方よりも、もうひと工夫必要です。 サンプルコード v0.57.0-rc.3でプロジェクトを作ってみました。これをベースにお話します。 前提条件：Babel 7のTypeScript対応の仕組み React NativeのTypeScript対応は、Babel 7のTypeScript対応に乗っかった形で実現されています。 ここで重要なのは、 Babelはtscを内部で実行するわけではない ということです。 今回導入された@babel/preset-typescriptは、FlowTypeの babel-plugin-flow-
React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ
こんにちは、@binaryta です。 先日「React Native OSS ペアプロ会 #3 byFACTBASE」というイベントに参加してきました。 factbase.connpass.com OSSにcommitすることを主眼としていて、React Nativeのissueの問題に解決策を提示したり、解決できそうならPull Requestを送るといった内容です。 このイベントに参加中、レイアウトのバグを直そうとしていた際にYogaを知りYogaに興味を持ちました。 僕は「React Native OSS ペアプロ会」には初回から参加していますが、今後も定期的に開催するみたいなので、興味ある方は是非参加してみてください。 対象 Yogaはクロスプラットフォーム間で共通にレイアウト処理をするべく作られたレイアウトエンジンです。そのためiOSではObjective-C, Android
![React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/72abfaebb5f46a2b58ed269573255d4ad3c6f6bf/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FA%2FAdwaysEngineerBlog%2F20180824%2F20180824163608.png)
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
055: Revisiting React Native
@Nkznさんをゲストに迎えて、AirbnbのReactNativeサンセット、ハイブリッドReactNativeの難しさ、AndroidとiOSどちらに向いているか、UIコンポーネントの実装などについて話しました。 podcast feedを購読するか、DLしてお楽しみ下さい。 Show Notes:Sunsetting React Native – Airbnb Engineering & Data Sciencereact-native-jp/react-native-at-airbnb-jp-translation129: Sunsetting ReactNative at Airbnb with Gabriel Peal – Part 1 – Fragmented130: Sunsetting ReactNative at Airbnb with Gabriel Peal – P
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
Super Cool Material UI components in React Native!
When I first started using react native in 2015, things seemed pretty hard to implement. There were not enough libraries or UI tool kits available in react native to build native like UI elements. But things have changed, React Native is the latest trend now (and flutter too …) I have worked on small, medium & huge projects in react native. Most of the time there will be a predesigned UI for us to
React Native の画面遷移・管理をオープンソースのアプリを見ながら学ぶ - Qiita
シンプルなスワイプの遷移 git-point で使われていた、スワイプの遷移。 git-point/blob/master/src/auth/screens/login.screen.js に全体の実装があります。react-native-swiper というスワイプのライブラリを利用しているようです。 使い方だけもとてもシンプル。 Swiper で View を囲うだけ。(ライブラリ本家の方のサンプルです) import Swiper from 'react-native-swiper'; import { Text, View } from 'react-native'; ... return ( <Swiper showsButtons={false} dotColor="#FFFFFF55" activeDotColor="#FFFFFFFF" > <View> <Text>Hel
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
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？JavaScriptAndroidiOSReactreactnative 最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn
ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ - Qiita
「React Nativeって時々聞くけど、どれくらいのものが作れるの？」とか「どこで調べればいいの？」とかそういった時に役立つリンクをまとめてみました。 公式ドキュメント まずはお約束として、ドキュメントです。 https://facebook.github.io/react-native/ 公式Showcase ReactNativeで作られたアプリが載っています。 日本のアプリだとCoinyさんのアプリが載っています。 最近、いい感じのニュースソースがないアプリは載らないようになりました。なので厳選されています。以前は自分の個人で作ったやつも載せてもらってたのでちょっと切ないです(´・ω・｀) React Native Playground React NativeのコードがWeb上で実行出来るサービスです。ユーザーがちょっとしたボタンアクションなど登録しています。アプリもあったはず
React Nativeを用いた初めてのiOSアプリ開発 : 選んだ理由と、開発で学んだこと | POSTD
候補としてモバイルアプリの作成について話し合いを始めた時、何を用いてモバイルアプリを構築するかについて、私たちには何の考えもありませんでした。クールな仕様で、楽しく使え、さらには洗練されたものでありたいという一般的な方向性は分かっていたのですが、誰もモバイルアプリを構築した経験がなかったのです。 そこで私たちはReact Nativeを使ってみることにしました。選んでみて良かったと思っています。この記事では、React Nativeを使うと決めた時に考えたことや、構築途中で学んだことを書き綴っています。 React Nativeを選んだ理由 私たちはWeb開発者であって、iOS開発者ではありません。ニューヨークでの集まりで、Swiftがどれだけ性能がいいか、それでいてObjective-Cもまだ存在価値があるということを、少しかじった程度で、一番得意なのはRubyとJavascriptです
React Native ファーストインプレッション - Qiita
React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデータバインディングとか、諸々が一緒。従って React.js でアプリケーションを作ったことがあれば、学習コストをほとんどかけずにアプリが作れる･･･かも 例えば以下のように、入力値をそのまま画面にエコーするアプリケーション。 これはこんな感じのコードになる。 var React = require('react-native'); var { AppRegistry, StyleSheet, T
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Swift および Objective-C を使用した iOS メモリー管理で絶対に失敗しないための 7 つのヒント