[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO
はじめに こんにちは。CX事業本部 Delivery部 フロントエンドチームの加藤です。 今回はCSSでiOSのUISwitchライクなReactコンポーネントを作ってみたいと思います。 開発環境 macOS Monterey 12.6 CodeSandbox（React Typescriptテンプレートを使用） 作ったコンポーネント iOSのUISwitchのようにクリックするたびにON/OFFが切り替わります。 コード Switch.tsx SwitchのReactコンポーネントです。 現在のON/OFF状態とON/OFFを切り替えた時の処理をpropsで受け取ります。 以下がポイントです。 ON/OFF状態を持たせるため、type="checkbox"のinput要素を使う input要素自体はON/OFFの状態を持つだけで、外観のカスタマイズはlabel要素を使う label要素ク
![[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
React Native + Expoでアプリを作ってApp StoreとGoogle Playで公開した
先日、VioletというTumblrクライアントアプリをReact Native + Expoで作りました。iOSとAndroidに対応していて、先日無事に審査が通り、現在App StoreとGoogle Playで公開しています。 ※有料アプリですが、もし良かったら買って使ってみてください！ 2021年にまさかTumblrアプリ！というのはさておき、開発の上でのもろもろを書いておきます。 経緯 もともとTumblrが好きで、スマホでよくTumblrを見ています。しかし、特にAndroidには純正アプリを含めて、「ここがもう少しこうだったらいいのにな」というアプリが多く、ならば自分が一番使いやすいTumblrクライアントアプリを作ろう、と思ったのがきっかけです。 開発当初はAndroidをメインで使っていましたが、iPhoneもよく使っていました。そこで、どうせならiOS/Androidの
iOSアプリにおけるFluxの難しさと開発を加速させる”store-pattern” — SwiftUI/UIKit
この記事は「Eureka Advent Calendar 2020」1日目の記事です。 Head of iOS & Pairs iOSアプリ開発責任者のMuukiiです。 本記事ではPairs iOSアプリとPairs Engage iOSアプリが活用している状態管理の方法についてお話します。 この記事はFlux等のUnidirectional-data-flowについてある程度の知識と経験がある方向けとなっています。 概要Fluxのコアコンセプトとしてストアパターン(store-pattern)の説明ストアパターンの目線で設計を考えることでより効果的なソフトウェア改善に取り組むことができる。Fluxやストアパターンのようなデータを中心とした考え方は簡単だが扱いは難しいその難しさはパフォーマンスを維持することにある。エウレカのiOSエンジニアで開発されているVergeGroup/Verge
iOSリバーシリファクタリングチャレンジ w/ Redux - Qiita
koherさんが公開された、このFat View Controller、あなたはリファクタリングできますか？チャレンジに参加しました。 本チャレンジは、 Fat View Controller として実装されたリバーシアプリをリファクタリングし、どれだけクリーンな設計とコードを実現できるかというコンペティションです（ジャッジが優劣を判定するわけではなく、設計の技を競い合うのが目的です）。 GitHubのソースコード Qiitaの解説記事 Swift Zoomin' チャレンジ #1 チャレンジ Swift Zoomin' チャレンジ #2 報告会 すばらしいチャレンジを用意くださったkoherさんを始め、運営のお手伝いをされているtakasekさん、Ogawaさんの皆様に感謝です。 リファクタリング結果 以下のGitHubリポジトリにリファクタリングした結果を公開しています。masterブ
【React Native】Google AdMob導入方法【iOS&Android両対応】 - Qiita
2021/04/20 追記 Androidにおいて、ライブラリをインストールしたときにreact-native-admobのエラーが発生することが確認できました。 参考: react-native-admobをインストールしたときのandroidでのエラー 修正方法を一番下に追記しています。 React NativeにGoogle AdMobを導入する際、情報が古かったり同様の方法でやってもうまくいかないことが多かったので、詳細に導入方法をまとめてみます。 Google AdMobを利用する際には現時点で2つ方法があります。 react-native-admobを利用する方法 react-native-firebaseを利用する方法 今回はreact-native-admobを利用する方法について説明します。 導入した環境 React Native 0.62.2 iOS 13.3 Coco
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 | Gihyo Digital Publishing … 技術評論社の電子書籍
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 著者 髙木健介，ユタマこたろう，仁田脇理史 著 発売日 2020年4月27日 更新日 2020年4月27日
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
React NativeをWebに持ってくることの意味 - ナカザンドットネット
ブラウザはGUIアプリケーションプラットフォームではない Flexboxについて React DOMはGUIアプリケーションフレームワークではない React NativeはGUIアプリケーションプラットフォームの抽象である React Native for Webがブラウザに持ち込んだもの コンポーネントが便利 スタイル周りも良い感じ TouchableOpacityでタップ表現もラクラク 他にもいろいろあるけど プロダクション事例が強すぎる 作者のnecolasも語ってた まとめ 余談：React系のアプリケーションフレームワーク React Native for Webは、React NativeをWebに持ち込む試みです。 しばしば、こういった試みに対して「わけがわからない」「本末転倒である」といった意見を見かけますが、筆者は妥当な試みであるという印象を持っています。ちょっと頭の中
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WhatsApp for iOS readying ability to react to a message with any emoji-)
Diagnostic and Pathology Lab in Bangalore, Delhi, Mumbai, Gurgaon, Noida & Hyderabad
iOSとAndroidのアプリ開発にReact Nativeを採用したWalmart