[B! react-native] clavierのブックマーク

CodePushとReact Nativeで緊急OTAリリース！了解！🚑 - Speaker Deck

iOSDC 2018前夜祭での発表内容です。デモプロジェクト: https://github.com/miyabi/iosdc18example

clavier 2018/09/04

react-native

リンク

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

clavier 2018/08/25

リンク

2018年 React Nativeで真剣なアプリを開発するなら、絶対使うライブラリー！ - KOKENSHAの技術ブログ

ここで、私が、React Nativeでアプリを開発する際に、実際に使っているライブラリーと「この機能でしたら、絶対これでしょう」というライブラリーをご紹介していきたいと思います。 React Nativeの開発で、全ての機能を全部自分で書くわけにも行きませんのでコミュニティが開発している優秀なものがあれば、どんどん活用すべきですね。しかし、オープンソースになっている以上品質も自分で、しっかり見極めて、選別しないと後になって、大変なことになります。途中から、別のライブラリーに乗り換えもできますが、プログラムの修正、テストなどで大変な工数を消耗してしまいます。なので、この文章を通して、みなさんライブラリー選別の際に、ご参考になれば嬉しいです！「これもおすすめ！」というライブラリーやコンポーネントがあれば、ぜひ教えてください！ https://facebook.github.io

clavier 2018/05/28

react-native

リンク

https://saitoxu.io/2017/09/30/react-native-d3js.html

clavier 2018/05/16

リンク

アーキテクチャと反省と改善

Forefront JavaScript ! 急成長中のサービスの技術達！

clavier 2018/03/05

react-native

リンク

https://blog.mismithportfolio.com/web/rn-webview-css

clavier 2018/01/09

react-native

リンク

React Nativeハイブリッドアプリケーション開発ことはじめ - tomoima525's blog

こちらはReact Nativeアドベントカレンダー 19日目の記事になります。ここ1、2年でReact Nativeによるアプリ開発はますます盛んになっていますが、一方でNativeと組み合わせたとハイブリッドアプリケーション開発はまだ発展途上です。 React Nativeの公式ドキュメントにもIntegrating with existing appという項目がありますが、あっさりと書かれている上に鮮度がお世辞にも高くありません。しかしながら、FacebookやAirbnbなど大企業がハイブリッドアプリケーションを積極的に導入していることや、Nativeアプリを部分的にリプレイスできる利便性から、今後も採用が増える分野と考えられます。本記事ではハイブリッドアプリを開発した自分の経験から、プロコンや実装の基本についてまとめました。ハイブリッドアプリケーションの良い点/難しい点そ

clavier 2017/12/20

リンク

ReactでWeb, ReactNative, Sketchに共通で使えるコンポーネントを作る話 | メルカリエンジニアリング

Mercari Advent Calendar 2017 の11日目はフロントエンドエンジニアの @sawa-zen がお送りします。はじめに 2013年に Facebook 社から React がリリースされ多くのフロントエンドエンジニアから注目を集めました。React を使用したWebサービスも次々と現れており、Web 界隈では今やポピュラーなライブラリとなりましたが、React の活躍は Web だけに収まりません。React Native の登場によりネイティブアプリを React の記法で実装できるようになり、さらには Airbnb 社から react-sketchapp が登場し Sketch のデザインデータも React で管理できるようになりました。しかし、完全に同じ記法で書けるというわけではありません。 Web, ReactNative, Sketchでの記法の違い

clavier 2017/12/12

react-native

リンク

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

clavier 2017/12/11

リンク

React NativeアプリでE2Eテストを回してみた

東京Node学園祭 2017 Nov 25 React Nativeアプリで「E2Eやってみよう」と思い実行に移した話 E2Eテストやってみようかな、と思っている人を想定

clavier 2017/11/26

react-native

リンク

[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）を作れる、といった代物です

clavier 2017/11/24

react-native

リンク

React NativeでNativeのUI Componentを使う（iOS編） - Qiita

サードパーティのNative用SDKのコンポーネントをReactNativeで使いたかったので調べた。公式は英語を読めたとしても説明不足だったり、余計だったり分かりづらいと思う。当方、Objective-C初心者ですので悪しからず。プロパティの設定や、他APIの使用はさらに色々設定が必要。 Android編はこちら。公式ドキュメント一番シンプルなコード例 RCTViewManagerを継承したヘッダーファイル（.h）と実装ファイル（.m）を作成。[XXXX]Managerと命名すること。XXXXがJSで呼び出される名前になる。実装ファイルで RCT_EXPORT_MODULE() を呼び出し。viewメソッドでNativeのViewを返す。 Managerクラスでつけた名前を指定してJavaScriptから呼び出す。

clavier 2017/11/12

react-native

リンク

ReactNativeで作ったIOSアプリを公開するまでに必要な手順 - Qiita

全体の手順自分のPC上で、秘密鍵／公開鍵ペアを生成する CSR（Certificate Signing Request - 証明書署名要求）を、(1)の公開鍵を付けてAppleに送る (2)の公開鍵を含む証明書を作り、認証局の秘密鍵で暗号化 (3)の証明書をダウンロードし、キーチェーンへ登録 App IDを登録プロビジョニングファイルの作成プロビジョニングファイルをダウンロードし登録ビルド設定を行う（BundleID, コードサイニング）ビルド、アーカイブ（ipaファイル作成 ※）証明書の作成 & キーチェーンへの登録 (1-4までの手順) 開発用と配布用の2種類がある開発用 (Development) https://developer.apple.com/account/ios/certificate/development 配布用 (Distribution) http

clavier 2017/10/24

リンク

How to make mobile app with Firebase and React Native

DevFest 2017 FirebaseとReact Nativeでのモバイルアプリの作り方 @k2wanko https://tokyo.gdgjapan.org/

clavier 2017/10/09

リンク

React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

This document discusses React Native and best practices for building mobile apps. It covers getting started with React Native, setting the application ID and bundle identifier, versioning, build types, integrating Fabric and Firebase, and using Fastlane for deployment. Tips are provided for configuring Android and iOS projects as well as continuous integration/delivery best practices.Read less

clavier 2017/10/09

リンク

ReactNativeでの開発を通じて得た知見 - razokulover publog

前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。垂直分割/水平分割のディレクトリ構成ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce

clavier 2017/08/29

リンク

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から入