reactnative(20)

20follower
Tomoumi Nishimura さんのアバター 6views

React Nativeでトーストメッセージ

Androidを使っている際に、画面の下の方に出て来る簡素なメッセージのことをトーストメッセージと言います。 React Nativeでの実装もすっごいシンプル。 import ToastAndroid from 'react-nati... 2017年6月28日
Tomoumi Nishimura さんのアバター 6views

TextInputのmultiline設定がAndroidだとうまく機能しない

原因は不明ですが、React-NativeではAndroid版TextInputのmultilineがうまく機能しない場合があるようです。 前提 こんな感じのTextInputを想定しています。 <TextInput... 2017年6月21日
Tomoumi Nishimura さんのアバター 42views

React Nativeのコンポーネントを詳しく見る

React Nativeのコンポーネントは仮想DOMとして表現されていますが、これを見るためにReact Developer Toolsというツールが用意されています。 導入方法 npmを利用します。 npm install -g r... 2017年6月14日
nbeppu さんのアバター 6views

React Native の TextInput で改行入力時にキーボードを閉じないようにする

エンターキーをタップするとキーボードが閉じてしまいますが、以下のようにblurOnSubmit={false}を設定すると回避できます。 <TextInput multiline blurOnSubmit={false} />... 2017年6月14日
Tomoumi Nishimura さんのアバター 16views

Reactotronに詳しめのログを投げる

Reactotronを使うと、React Nativeで作ったアプリのログをリアルタイムかつ簡単に確認することができます。 Reactotronを利用してログを飛ばす場合、例えば、 console.tron.log("hogehoge"... 2017年6月7日
nbeppu さんのアバター 13views

React Native で iOS/Android を切り替える方法

主に以下の2通りの方法があります。 ファイル名を変更する ファイル名を以下のように変更するとimport時に自動的に振り分けられます。 App.js ↓ App.ios.js App.android.js ソースコードで分岐する... 2017年6月2日
Tomoumi Nishimura さんのアバター 23views

react-native-fetch-blobでmultipart-formdataをPOSTする

react-native-fetch-blobを利用してデータを送るには、 RNFetchBlob.fetch(method, url, headers, [ { name: 'id', data: id }, { name: 'pass... 2017年5月31日
Tomoumi Nishimura さんのアバター 26views

React Nativeで画像選択を行う

React Nativeを利用したアプリ開発で、画像を選択する処理を実現する際には、react-native-image-pickerパッケージが利用できます。 導入 基本的には npm install react-native-im... 2017年5月11日
nissy さんのアバター 56views

React Native mapに独自の情報ウィンドウを表示

そもそもの発端 react-native-mapsを用いてマーカーに独自アイコンを当てると、マーカーをクリックしてもクリックの有効範囲が狭く、デフォルトの情報ウィンドウが表示されにくいという問題が生じました。デフォルトでは、<Map... 2017年3月31日
nissy さんのアバター 34views

ReactNative FontAwesomeを使う

react-native-vector-iconsのインストール 2つのコマンドを叩くだけです。 // --saveはオプションです $ npm install react-native-vector-icons --save // l... 2017年3月30日
Tomoumi Nishimura さんのアバター 83views

React Nativeの基本事項

React Nativeの基本的な事柄です。 基本の基本 プロジェクトを新規作成して起動します react-native init hogehoge cd hogehoge npm install react-native run-i... 2017年3月28日
ysugiyama12 さんのアバター 15views

記事一覧などに便利なコンポーネント:Card

nativeBaseにあるCard要素を用いるとリスト形式のデザインが簡単に実現できる。 <ScrollView horizontal> <Card> <CardI... 2017年3月22日
Tomoumi Nishimura さんのアバター 76views

create-react-native-appを触ってみる

React Nativeのプロジェクトをサクッと作れるcreate-react-native-appを導入する方法です そもそも論 React.jsの雛形を作れるCreate React Appというものがありますが、これに着想を得てR... 2017年3月21日
nissy さんのアバター 53views

ReactNative react-loggerを使ってデバッグ

ReactNativeのデバッグは公式にもある通り、Webブラウザ上でブレークポイントを打ちながら可能ということで、かなり良心的な設計になっているのですが、さらにReduxフレームワーク開発を効率良くすすめるデバッカーモジュール「react... 2017年3月17日
ysugiyama12 さんのアバター 90views

NativeBaseを用いたReact Native のデザイン設計

iOS,Androidそれぞれの様式に合わせたコンポーネントをシングルソースで提供するオープンライブラリがNativeBaseである。 npm install した後、各ファイルにおいて必要なコンポーネントを import { Conte... 2017年3月15日
ysugiyama12 さんのアバター 68views

React Nativeで横スクロールするリストの作成

ComponentsのひとつであるScrollViewを用いて作成する。 <View style={styles.Overlay}> <ScrollView horizontal={true}> <... 2017年3月1日
nissy さんのアバター 75views

react-native-vector-icons Tabbarにアイコンを当てる

以下のように、公式の通りにアイコンを当てようとするとアイコンのURLが必要になります。 var SampleTab = React.createClass({ getInitialState: function(){ ret... 2017年2月28日
ysugiyama12 さんのアバター 109views

Reactの基本的な書き方

新しいアプリ作りのために一からReactの文法を覚えている途中なので自分のためにも得た知識をまとめていく。 などにはスタイルを指定することが多い。cssのような書き方で指定できる。 <View style = {styles.con... 2017年2月15日
ysugiyama12 さんのアバター 77views

React Nativeについて

物件の写真を管理するアプリにReact Native を用いる。Facebookが2015年に発表したモバイルアプリ開発のためのフレームワークである。 React.jsの文法を用いてiOS,Androidどちらでも動くネイティブアプリの制作... 2017年2月13日
nbeppu さんのアバター 103views

React Native で Realm を利用する(Android)

必要なモジュールのインストール npm install -g react-native-cli brew install watchman brew install flow プロジェクトの作成 react-native init ... 2016年4月4日