react-native > Tab navigation - Qiita
// You can import Ionicons from @expo/vector-icons if you use Expo or // react-native-vector-icons/Ionicons otherwise. import Ionicons from 'react-native-vector-icons/Ionicons'; import { createBottomTabNavigator } from 'react-navigation'; export default createBottomTabNavigator( { Home: HomeScreen, Settings: SettingsScreen, }, { navigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, hor
既存のVisual Studio 2017 Community環境に.NETモバイル開発で「配置エラー」でハマった場合の対応 - Qiita
前提 この記事は既にVisual Studio 2017 Community環境をインストールしていて、Visual Studio Installerの変更で「.NETモバイル開発」を追加した後に「配置エラー」が発生した人向けの情報になります。 新規でインストールした場合は問題ないと思います。 仕事などで既にC++、C#、VB.NET、PythonでVisual Studio環境を構築しているPCに、いきなりXamarin環境を追加するってパターンは意外とあるのではないでしょうか？ Xamarin開発環境の追加 Xamarin環境のインストールは、以下を参考にインストールしました。 丁寧にまとまっていてわかりやすかったです。 Xamarin やりたい人向け Visual Studio 2017 インストール手引書 インストール時のトラブル インストール時のトラブル周りはここを参考にさせて頂
React Nativeでindex.android.bundleがAPKに保存されない - Qiita
問題はこの中に自分たちのJavaScriptが保存されなくなってしまったことです。 すべてはこいつ react.gradle Androidはgradleというビルドツールを使ってビルドしており、React Nativeにおいてはfacebook/react-nativeのreact.gradleというファイルに問題があったようです。 ざっくりいうと、react-native bundleを実行し、自分が書いたJavaScriptのコードをindex.android.bundleという1つのファイルにまとめてくれます。 いろいろ調べていると、どうもこのロジックが怪しい模様でした。調査結果から言うと、 試しに0.57のファイルを node_modules/react-native/ にコピーしたところ、無事にAPKに追加されるようになりました。 使っていたバージョン（0.52） https:
React Native Fatal error: "config.h" file not found - Qiita
概要 react-nativeの開発をしている際、ビルドが通らなくなったときのメモ。 おそらく他の解決策、これで解決しないケースもあるが参考になれば。 環境 XCode 10.0 nodejs 8.9.4 npm 5.6.0 yarn 1.3.2 react-native 0.52.0 react-native-cli 2.0.1 内容 発生したエラー１ シンプルにreact-native run-iosをした際、下記のエラーが発生しました。一部項目はマスクしています。 ❌ /Users/xxxx/node_modules/react-native/third-party/glog-0.3.4/src/base/mutex.h:105:10: 'config.h' file not found # include "config.h" // to figure out pthreads s
ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[環境構築編] - Qiita
ReactNative+TypeScriptをするための環境構築のメモです。 バージョンと前提条件 macOS Mojave 10.14 Xcode 10.0(XcodeのiOSシミュレーターを使います) node 9.4.0 npm 6.4.1 Homebrew 1.7.6 tsc 3.1.3 yarn 1.10.1 react-native-cli: 2.0.1 react-native: 0.57.1 ReactNativeプロジェクトを作成する $ cd [プロジェクトを作成するパス] $ react-native init [プロジェクト名] 以下のような構成のプロジェクトが作成されるかと思います。 プロジェクト名 ├ android/ ├ ios/ ├ node_modules/ ├ .babelrc ├ .flowconfig ├ .gitattributes ├ .giti
![ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[環境構築編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/96e5685c0a9128261666a3ffc9f49ea567e83e64/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjMxMDcyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTM2MTQwMjI1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWRiNTczY2FkNTY3MzYxMGY4M2E1NjMxOWZiMmRmOTNi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1893948a6db5cb8bc521aa639c049707%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UmVhY3QlRTMlODIlODJUUyVFMyU4MiU4MiVFNSU4NSVBOCVFNyU4NCVCNiVFMyU4MiU4RiVFMyU4MSU4QiVFMyU4MiU4OSVFMyU4MiU5MyVFNyU4QSVCNiVFNiU4NSU4QiVFMyU4MSU4QiVFMyU4MiU4OVJlYWN0JTIwTmF0aXZlJUUzJTgyJTkyVHlwZVNjcmlwdCVFMyU4MSVBNyVFMyU4MiU4NCVFMyU4MiU4QiU1QiVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFNyVCNyVBOCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTAwZmNhZmJmNjUzZThlM2QzMDc3YzVhOWFiOWNiNzY5%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzYWJpbmVrbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTI1ZmNlMWEzOWVkNmUyMjdmZDk0MzczM2QyOWQxYWFm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df0174d92d64c3322b1425ccf88cae46c)
ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[HelloWorld編] - Qiita
前回ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[環境構築編]に引き続き、iOSシミュレータで確認しながら進めていきます。 とりあえずTypeScriptっぽいことしたい！ というわけでまずはTypeScriptの特徴である型を使ったサンプルを書いてみます。 前回の記事で作った「App.tsx」に変更を加えます。 アクセス修飾子と型情報 JavaScriptに無くてTypeScriptにある特徴の一つに、アクセス修飾子があります。 オブジェクト指向とかアクセス修飾子についてはここでは詳しく書かないのでググってください。（タイトルに「ReactNativeとTypeScript全然わからん」とは書いたけど「プログラミング全然わからん」とは書いてない） TypeScriptで型付きの、例えばstring型変数はこう書きます。 private tsT
![ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[HelloWorld編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bfa5a43117b714b5b47b5d041c32030f2149708f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjMxMDcyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTM2MTQwMjI1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWRiNTczY2FkNTY3MzYxMGY4M2E1NjMxOWZiMmRmOTNi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1893948a6db5cb8bc521aa639c049707%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UmVhY3QlRTMlODIlODJUUyVFMyU4MiU4MiVFNSU4NSVBOCVFNyU4NCVCNiVFMyU4MiU4RiVFMyU4MSU4QiVFMyU4MiU4OSVFMyU4MiU5MyVFNyU4QSVCNiVFNiU4NSU4QiVFMyU4MSU4QiVFMyU4MiU4OVJlYWN0JTIwTmF0aXZlJUUzJTgyJTkyVHlwZVNjcmlwdCVFMyU4MSVBNyVFMyU4MiU4NCVFMyU4MiU4QiU1QkhlbGxvV29ybGQlRTclQjclQTglNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05YzkzNzY1ZWM4ZmEzZTExNzIwNzM4N2E5YmRlZGE1Zg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzYWJpbmVrbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTI1ZmNlMWEzOWVkNmUyMjdmZDk0MzczM2QyOWQxYWFm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd60f72f2cef58d870c6d3d57350714a5)
新規React-nativeプロジェクトのビルドが失敗した時の対処法 - Qiita
概要 XCode 10でreact-native initで作成したプロジェクトでreact-native run-iosを実行した際、色々と詰まったので、その対処法メモ 実行環境 XCode 10.0 React Native 55.4 はじめに XCodeを最低一度起動しておく XCodeをダウンロードした直後、またはアップデートした直後である場合、XCode起動時に必要な処理が行われるので、一度実行しておく 出てきたエラーとその対処法 ":CFBundleIdentifier", Does Not Exist 最初にreact-native run-iosを起動した時、下記エラーが表示された Installing build/Build/Products/Debug-iphonesimulator/react-native-test.app An error was encounte
ReactNativeを既存アプリに組み込むのを断念したメモ - Qiita
弊社のアプリはフルネイティブでswift/kotlinで書いているんだけど、どうしても同じ機能を作るときにまとめて作れないかとモヤモヤする。かといってクロスプラットフォームな開発はcordova/titaniumなどで辛酸を嘗めたのであまりやりたくない・・・ そこでReactNative（以下RN）が流行っいるしどうかなって考えた。 結論 既存のswift/kotlinで書かれたプロジェクトに組み込んで徐々にリプレイスを・・・などと考えたが甘かった。使うにあたって結論として**「タイミングが今じゃないな・・・諦めよう」**としました。 詳細は以下。 考えたこと 特定の画面をReactNativeで書いて共通化できる？ これは全然できる。 ネイティブからjsをコールする感じ、webview読み込むあの時代の仕組みに近い。 この辺を参考にいただければ。 ざっくりいうと提供されている RCTRo
iPhone Xs Max の判定 - Qiita
iPhone Xs Max 辛い 最近出たiPhoneXsMaxがreactnativeで対応されていないところが多くて、 iPhoneXsMax用の判定できるようにした。 これを判定させたいところでimportするだけで大丈夫!(booleanで返ってくるから便利だと思う) import { Platform, Dimensions } from 'react-native'; const XSMAX_WIDTH = 414; const XSMAX_HEIGHT = 896; // iPhone XS Max対応 export const _IPhoneXsMax = () => { const { width, height } = Dimensions.get('window'); return ( Platform.OS === 'ios' && (width === XSMAX
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ReactNative]未使用のstyleをESLintで検知したい - Qiita![[ReactNative]未使用のstyleをESLintで検知したい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2628e95f33a7ea04afa7ee8121a9abc92aab425/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTc1MjEzJTJGcHJvZmlsZS1pbWFnZXMlMkYxNDkxODI1ODgxP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWFkZjNmMmZhOTcwNzNlN2Q3YzkwYzg1YzM1NzA5NmIz%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253De7737dac41084cef8c42150b2f8989b0%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmVhY3ROYXRpdmUlNUQlRTYlOUMlQUElRTQlQkQlQkYlRTclOTQlQTglRTMlODElQUVzdHlsZSVFMyU4MiU5MkVTTGludCVFMyU4MSVBNyVFNiVBNCU5QyVFNyU5RiVBNSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTFhNWNjMjEzODM4YTUzZDMwMjkwOGFiM2NmNmNkNmVm%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBvemFraTI1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YmUzN2UyNzAzYjZmMjUyNWFkMGE3ZGE1Y2EwNmVmZDc%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D82c1ce5e52e9c39504831b2cdeb6ea47)
React Native codepush導入備忘録 - Qiita
ReactNative+TypescriptでFlatListを使った時につまずいたポイント - Qiita
React-Native@0.57.0でstyled-components@4.0.0が使えない時の対処法 - Qiita
【Flow】React Native styleのtypeは？ - Qiita
XCode10でReact-Nativeのプロジェクトを実機のiPhoneで試験する - Qiita
TextInputコンポーネントのkeyboardType別のスクリーンショット（一部） - Qiita
AndroidのTextInputでunderlineColorAndroidを指定するとクラッシュする問題【React Native】 - Qiita
ReactNative57.2のシュミレータ立ち上がらない問題(2018/10/14)
react native 環境構築 起動まで - Qiita
react-native-navigationでモーダル遷移時に画面がチラつく - Qiita
