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
FlatListでonEndReachedを使うときの罠 - Qiita
結論 onEndReachedを利用するFlatListがある画面に遷移する場合は、必ず遷移前にストアのリストデータをクリアすること クリアしないとどうなるか？ LINEのようなメッセージアプリを想像してください。 トーク一覧画面 → トーク詳細画面 という構造になります。 トーク詳細画面のメッセージがFlatListで作られているという想定です。 トーク詳細画面に遷移したときに、直前に見たトーク詳細画面のメッセージが一瞬見える その後、遷移先のメッセージが取得され、上書きされる（A） ただし、一瞬見える前のメッセージが画面内に収まるほど短い場合、onEndReachedが働く（B） onEndReachedに次のメッセージを取得するコールバックを仕込んでいると、 一瞬だけ直前に見たトークAのメッセージが見え、 正しいメッセージが取得されて表示されたあと、 一瞬見えたトークAのメッセージの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
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
【React Native】 'config.h' file not found - Qiita
React Native Firebase が Carthage を認識してくれない - Qiita
React NativeでAndroidのPickerのfontSizeを変更する方法 - Qiita
react-native 0.57.2の導入エラー - Qiita
【React Native】WebView内にCookieをセットしたい場合 - Qiita
react-native-firebaseで import { database } from 'react-native-firebase'が可能になった。 - Qiita
KeyboardAvoidingView便利だし簡単 - Qiita
【React Native】buildが終わらん `running x of y custom shell scripts` - Qiita
