React Native for WebでHello world - Qiita
React Native for Web（npmパッケージ名はreact-native-web）というライブラリを紹介します。 概要 もともとWebの世界（ブラウザで表示するフロントエンドの世界）で生まれたReactを、モバイルのネイティブアプリの世界に広げたものがReact Nativeですが、それを更に発展させて、React Nativeで書いたReactコンポーネントをWebでも動かせるようにするものがReact Native for Webです。一周回ってWebに先祖返りといった感じです。 ネイティブアプリとWebとでReactコンポーネントを共通化できることが一番の利点です。 その需要が今はニッチなのか、ちょっとマイナーなライブラリですが、何気にGitHubにはスターが8000以上ついてます。 有名どころでは Twitter LiteがReact Native for Web（以
ReactNativeでのiOSプッシュ通知の実装方法 - Qiita
React Nativeでプッシュ通知機能追加方法を紹介します。 ライブラリ プッシュ通知を実装するために、react-native-push-notificationを使います。 [zo0r/react-native-push-notification: React Native Local and Remote Notifications] (https://github.com/zo0r/react-native-push-notification) このライブラリはiOS・Android両方対応してますが、今回はiOSのみ設定します。 インストール 初めに、ライブラリをインストールします。 import { PushNotificationIOS } from 'react-native'; import PushNotification from 'react-native-pu
ReactNavigationのDrawerNavigatorから直接メソッドを実行する方法 - Qiita
結論から言うと「直接メソッドは実行できない」ようです。 contentComponentを利用してItem項目にButtonなどを差し込み、そのonPress()等で対応するか、おとなしく一度Component（画面）を経由するしかないようです（今回は前者の対応です）。 やりたいことはDrawerにLogoutを仕込み、そのままLogoutしたいだけなのですが。。。 以下、Drawerの定義を抜粋したコード。 ButtonだとStyleが限定されるのでTextで対応しました。また、既存のメニューと似せるためには強引にstyleで合わせる必要があります。 なので、sytleに関する記述はかなりHack的になり環境依存です。もっとまともな方法があれば教えてほしい。。。 Viewだと改行がはいるのでTextで囲ったり、Textだとmarginが効かないのでViewで囲ったりと・・・。私が不慣れな
McAfeeのせいで react nativeがbuild出来ない 解決メモ - Qiita
McAfeeがReactNativeのデバッグ実行で使用する PORT８０８１を占有しちゃうため、 それを回避してバンドルを置いておかないといけないみたい。 まかふぃーを殺すのもいいけど、以下で解決しました。 参考文献 https://facebook.github.io/react-native/docs/troubleshooting https://github.com/facebook/react-native/issues/10715 iOS /node_modules/react-native/local-cli/server/server.js default: process.env.RCT_METRO_PORT || 8081, ここの8081のポート番号を、任意の番号に変更する /node_modules/react-native/React/React.xcodepr
React-Navigatorを利用してみる（基礎編） - Qiita
注意 react-navigation v3で動作確認しています react-navigation v4がリリースされ、createBottomTabNavigator等が分離されています（未対応）。 概要 まともなアプリを作るためにはNavigation機能の利用は避けて通れません。 ライブラリとしてはreact-navigationとreact-native-router-flux(rnrf)というのが有名みたいですが、Reac自体に不慣れなので情報が多いreact-navigationを利用してみます。 この基礎編をベースにした応用編んも書きました。よろしければどうぞ。 React-Navigatorを利用してみる（基礎編）→この記事 RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる RN応用編２：TabやDrawerメニューにアイコンを設定する RN
RN応用編２：TabやDrawerメニューにアイコンを設定する - Qiita
既存編、応用編１からの続きです。 シリーズ React-Navigatorを利用してみる（基礎編） RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる RN応用編２：TabやDrawerメニューにアイコンを設定する→この記事 RN応用編３：Reduxで値の取り回し 概要 応用編１ではハンバーガーメニューで見た目をいじったので、ついでにTabやDrawerメニューにアイコンを追加してみます。 Tabメニューにアイコンを追加 アイコンもいくつかの場所で追加できますが、ここではcreateBottomTabNavigator()にnavigationOptionsを定義することで追加してみます。 Tabにアイコンを追加します。react-native-vector-iconsを利用するので、installやimportがまだであれば実行してください。 +import
RN応用編３：Reduxで値の取り回し - Qiita
応用編２の続きです。 シリーズ React-Navigatorを利用してみる（基礎編） RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる RN応用編２：TabやDrawerメニューにアイコンを設定する RN応用編３：Reduxで値の取り回し→この記事 概要 応用の本命です。 画面が増えてくると画面間での値や関数の共有が標準のpropsによる共有ではしんどくなってきます。 そこで値や関数を一言管理できるreduxを利用してみます。 また、Reduxが入れ子にしたページ等でも正しく機能するか確認します。 本当はReduxの利用が応用のメインですが、余計な記事（応用１、応用２）を書いてしまいました。 reduxを使うための準備 まずはReduxを利用するためのモジュールをインストールします。 reduxのインストール reduxとreactで使うためのモジュールで
ReactNative > createMaterialBottomTabNavigatorの使い方 - Qiita
createMaterialBottomTabNavigatorの使い方 公式ページを読んでもさっぱりわからなかったのでメモ createMaterialBottomTabNavigator · React Navigation ↓のようなマテリアルなボトム・バー 以下に使い方サンプルあり Snack 使い方 createMaterialBottomTabNavigatorを作って、 App.jsで使うだけ。 なんてステキ仕様 createBottomTabNavigator · React Navigation の方はRedux-Offlineでバグがありましたが、createMaterialBottomTabNavigatorはちゃんと動きました。 App.js import React, { Component } from 'react'; import MyTabs from '
VirtualizedListでimmutable.jsのList型を使うときにハマったポイント - Qiita
<VirtualizedList data={SOME_IMMUTABLE_LIST_OBJECT} keyExtractor={(item, index) => index.toString()} getItem={(data, index) => data.get(index)} // VirtualizedListでは必須プロパティ getItemCount={data => data.size} // VirtualizedListでは必須プロパティ renderItem={item => this._renderItem(item)} /> 概要 immutable.jsのList型は、要素の引数を能動的に指定できるためとても便利です。 例えばデータベース内のidとListのindexを対応づける、という使い方もできるため、他にも使っている人がいると思います。 しかしimmuta
react-native run-iosが「Print: Entry, ":CFBundleIdentifier", Does Not Exist」でBUILD FAILEDになった時の対処法 - Qiita
react-native run-iosが「Print: Entry, ":CFBundleIdentifier", Does Not Exist」でBUILD FAILEDになった時の対処法iOSreactnativereact-native 昨日からReactNativeを始め、詰まったのでメモがてらQiitaに書いておきます。 環境 macOS: Sierra xcode: Version 8.2.1 (8C1002) node: v10.12.0 react-native-cli: 2.0.1 react-native: 0.57.4 各々調べて書いてましたが、react-native infoで楽々調べられます。 エラー詳細 >react-native run-ios ---一部抜粋--- ** BUILD FAILED ** The following build comman
react-native-router-flux の画面遷移4パターン@GIF画像 - Qiita
Actionsで提供されているアニメーションから4パターンをGIF画像でまとめました。 Actions.pop Actions.popToも同様です。 現在のページは右手に退きつつ、新しいページが現在のページの左側から登場します。 Actions.push key名をメソッドに指定した場合もこれ。 Actions.jumpと同様ですね。 現在のページが左手に退きつつ、新しいページが右から重なってきます。 Actions.replace アニメーションなしでいきなりページが切り替わります。 Actions.reset Actions.replaceとアニメーションは変わりません。違いはルーティングスタックに対する処理だけなので、画面を見ている人からすると変わらないです。 以上、お役に立てば幸いです。
ReactNativeでTabにStackを入れ子にする - Qiita
import React from 'react'; import { Text, View, Button } from 'react-native'; import { createBottomTabNavigator, createStackNavigator } from 'react-navigation'; import { Entypo, Ionicons, Feather, FontAwesome } from '@expo/vector-icons'; //Home class HomeScreen extends React.Component{ render(){ return ( <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}> <Text>Home</Text> <But
ReactNativeでQRやBarcodeを生成する - Qiita
import React from 'react'; import { StyleSheet, Text, View, Button, Alert } from 'react-native'; import QRCode from 'react-native-qrcode'; import Barcode from 'react-native-barcode-builder'; export default class App extends React.Component { state = { text: 'hoge' } render() { return ( <View style={styles.container}> <Text>Generate QR and barcode.</Text> <QRCode value={this.state.text} size={200}
Reduxの卒業式をしよう - Qiita
モチベーション Reduxを使っていたが個人開発なのでコード量が増えてつらい 使い慣れたアーキテクチャを使いたい 自分好みの処理分割、ファイル分割をしたい そもそもほかのライブラリ使うのにミドルウェアが必要なものってどうなのよ 学習コストが高くて飛び入りでプロジェクトに入った人がつらい 短期の開発で使いづらい もっと他にいいライブラリ無いの？ React系の状態管理ライブラリ Redux mobX undux それぞれの長所、短所などをまとめてみます。 Redux メリット 厳正に書きかたが決まっている(ガイドラインがある) テストがしやすい アーキテクチャがきれい(個人的にはコードは見やすいと思います) デバッガなどのツールがそろっている デメリット 学習コストが高い コードの記述量が多い 影響範囲が広い アーキテクチャが限定される ミドルウェアが必要 mobX メリット Reduxに比
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactNativeで引っ張ってデータ更新 - Qiita
ReactNativeでステータスバーを調節する - Qiita
ReactNative (android)で画像ファイルが Duplicate file, Original is here. The version qualifier may be implied となるときの対処法 - Qiita
RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる - Qiita
スマートフォンアプリ制作 ~React Native with Expo~ 環境構築 - Qiita
ReactNativeのリモートデバッグがiOSの実機で動かなくて困った話 - Qiita
