WSL環境でReact Nativeのホットリロードが動作しない場合 - Qiita
Windows 10 Ubuntu 18.04.5 LTS npm 6.14.9 expo 4.0.17 Visual Studio Code 1.52.1 現象 Windows Subsystem for Linux (WSL) の /home/{ユーザー名} 配下に React Native プロジェクトを作成。 Visual Studio Code でプロジェクトを開き、Project/App.js を変更して保存しても、ホットリロードが動作しない。 ターミナルで直接 App.js を編集すると、ホットリロードが走る。 原因 Visual Studio で下記のディレクトリパスを参照していたため、ファイル変更の監視システムが動作していなかった。 C:\Users\{Windowsのユーザー名}\AppData\Local\Packages\CanonicalGroupLimited.
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}
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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
