React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.3 Node.js 12.16.1／npm 6.13.4 expo-cli 3.18.4 expo 36.0.2（React Native 0.61） React 16.9.0 メモアプリを完成させる 前回から2回に分けて、実践的なアプリ開発のサンプルとして、メモアプリを開発しています。前回は、データ構造を決めてサンプルデータを作成し、それを元にメモの一覧を表示するところまで解説しました（図1の左側）。 図1：メモアプリのラフスケッチ 今回は、その続きとしてメモデータを作成できる画面を作り、アプリとして完成させるところまでを解説します。作業工程の全体像を、改めて確認しておき
React Nativeでメモアプリを作ろう～セットアップと表示
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.3 Node.js 12.16.1／npm 6.13.4 expo-cli 3.13.8 expo 36.0.2（React Native 0.61） React 16.9.0 メモアプリを作る これまでの連載では、React Nativeでできることや、その周辺ツールについて広く学んできました。そろそろ、読者の皆さんも実用的なアプリを作ってみたくなってきた頃ですよね。今回と次回は、実践的なメモアプリを作りながら、UIコンポーネントの使い方や状態管理の方法、データの保存の方法について解説します。 今回作成するメモアプリをイメージしてもらいやすくするために、簡単な画面デザイン
ReactNative+Redux+NativeBaseでつくるサンプル実装をのぞく - Qiita
1. はじめに 個人的にReactNativeを(片手間で)触り初めてから約1年が経過しまして、その際にもう一度始めたばかりの時になかなか理解ができなかった点を中心に復習をしてみた際の記録を改めて自分なりにまとめてみることにしました。また補足として現在の本業(iOSでSwift開発)にも活かすことができた部分についても少し紹介ができれば幸いに思います。 ※ すでにReactNativeを活用している方には物足りない内容かもしれませんが、何卒ご容赦下さい。 ReactNative + Redux + NativeBase + Firebaseを組み合わせたサンプル ※ 上記のサンプルに関しても手を入れた場合には追記するように致します。 今回の記事のポイントとなる部分を「React Native Meetup #8」にて発表する機会がありましたので、その際に使用したスライドもここに共有致します
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
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
ReactNativeにActionSheetを実装してみた - 個性は次々死んでいく
ActionSheetとは？ この下から出てきてるやつ RN本体でサポートしてくれてはいるが、iOSの標準機能なので iOS用のコンポーネントになってる。 ActionSheetIOS うーん…同じコードで両方対応したいですね… react-native-action-sheet そんなときはコレ github.com いい感じにiOS・Android両方対応してた Androidは（多分）見慣れたポップアップみたいな感じで表示される expoでサンプルコードが公開されてるので、実機とアプリがあれば簡単に確認できて便利 ※ expoについては省略 今回はexpoじゃなくて、通常通り react-native init app の流れからの組み込みを想定してる 組み込む まずはプロジェクトのルートでパッケージをインストールする $ npm install @expo/react-native
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
【2018年版】React NativeでiOSアプリを作ってストアでリリースしてみた - Qiita
はじめに React Nativeでの開発が全体的にどんな感じか掴みたかったので、小さなアプリを開発し、App Storeでリリースしてみました。 プロジェクト作成からストアでのリリースまでの間、開発中に出てきたテーマを振り返ってみます。（React Nativeの概要や特徴の解説については、他の方の記事をご覧ください。） 今回の一連の開発を通して、現段階ではネイティブ側（Xcode）を触らないといけない場面がちらほらあるということが分かりました。 ※記事執筆時点のReact Nativeのバージョンは0.43です ※2020年に別のアプリを作った記事を投稿しました【2020年版】 React NativeでiOSアプリを作ってストアでリリースしてみた - Qiita ※筆者はiOSアプリの開発経験者です（Swift, Objective-C） ご注意 本記事の執筆時点に対して、最新のRe
Simple React Native forms with redux-form, immutable.js and styled-components - Esben Petersen
Simple React Native forms with redux-form, immutable.js and styled-components How to easily integrate user input into your state management on the mobile platform Posted by Esben Petersen on January 6, 2017 tl;dr If you just want to see how you can use redux-form and immutable.js in react native, you can find the code for this article can be found right here. Introduction At Traede we use redux-fo
React Nativeで外部リンクをブラウザで開く - Qiita
概要 アプリから特定のURLをブラウザで開く方法についてのメモです。 実装 Linking APIを使用します。 Linking.openURL(url).catch(err => console.error('URLを開けませんでした。', err)); Linking.canOpenURL(url).then(supported => { if (!supported) { console.log('無効なURLです: ' + url); } else { return Linking.openURL(url); } }).catch(err => console.error('URLを開けませんでした。', err));
React Native で父親専用 PDF ビューワーを作った - Qiita
PDF ビューワーなんて世の中にゴマンとあるのに、どうしてもうちの父親の要件を満たすアプリが見つからなくて、もう自分で作るかということで作った。 成果物 要件 父親がこれまで作ってきたギターコード付き楽譜 PDF 400 件ほどを素早く一覧・検索・表示できること iPad 第4世代 Wi-Fi モデル iOS 10 で動作すること。特定個人向けなので AppStore になくても OK オフラインで利用可能。 iTunes でファイル共有するやり方はすでに教えてある （この程度の要件なら既製品が見つかりそうなもんだけど、いくつか試したものはだいたいファイル一覧が激重で、そうでなくても一覧の並び順が unicode 順だったりオフラインで使えなかったりした） なぜ React Native ? 幾つか上がった候補と却下理由は下記。 Swift : GUI でのレイアウトがダルくていつもそこで
React Native で development, staging, production など環境を切り替える - Qiita
React Native で development, staging, production など環境を切り替えるJavaScriptAndroidMobileiOSreactnative 基本的に React Native は development か production かしか切り替えができない。 __DEV__ React Native では development かどうかを判別する仕組みとして __DEV__ というグローバルな変数が定義されている。次のページに書いてあるように、 packager に bundle してもらう際、 dev という query prameter に true か 1 を指定したときに __DEV__ = true としてくれる。 これを見て設定を切り替えればいい。 ちなみに Android で cd android && ./gradlew
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントを装飾する