Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんばんは。2回目の投稿です。 前回、以下の投稿をさせていただきました。 create-react-native-appから本格的な開発に移行するためのTipsその1 初投稿にも関わらず多くの閲覧と幾つかの反応を頂けまして、恐縮するばかりです。 下手な事書けない はじめに 前回の記事の続きを投稿しようかと考えていましたが、 (予想はしていたものの)テストの部分が重かったので React Nativeのテスト全般についての記事を書こうかと思いました。 React Nativeといいつつ、View以外の部分はReactとおんなじです。 reduxやredux-sagaの知識が前提としてある程度必要になってきます。 参考: Redux入門【ダイジェスト版】10分で理解するReduxの基礎 redux-sagaで非同期処理と戦う 環境・使用したモジュール macで開発しています。 node: v1
何々react-nativeのデザインはnative baseというライブラリを使ってみるといいの? それじゃあ yarn add native-base react-native link native-base だ! ちょっと待ったそこのあなた。今軽々しくreact-native linkを使いましたね。 react-native linkは、jsだけは実現できないos毎に分けて記述された、objective-cやjavaのコードを自動で設定してくれる便利コマンドですが、理解していないと落とし穴にはまりますよ。 今回は 「react-native linkは何をしているのか?」 をreact-native linkを「手動」で行いながら学んでいきます。 それでは手動でreact-native linkを行ってみましょう。 Step 1 もし、ライブラリがnativeコードを含んでいる場
Detoxとは https://github.com/wix/detox/ モバイルアプリでE2Eテストの自動化を行えるライブラリ テスト成果物(Artifacts)とは Detoxでは、v8からE2Eテストの結果を成果物(Artifacts)として記録しておくことができます。 https://github.com/wix/detox/blob/master/docs/APIRef.Artifacts.md 具体的には以下のような記録を残すことが可能です。 .log形式のログ .png形式のテスト前後のスクリーンショット .mp4形式のテスト中の画面遷移の動画 何が問題か React Native ExpoでDetoxを利用するときはdetox-expo-heplersを利用しなければなりません https://github.com/expo/detox-expo-helpers 通常であ
Sentryとは アプリケーションからイベントログを送信してくれるもの。 https://sentry.io/ Expoに対応している(bugsnagはExpo未対応) 導入方法 登録してプロジェクト作成 Sentryに登録する 言語やフレームワークを選択、project nameを記入してCreate Projectする 下の方にあるPublic DSNをコピーしておく(Sentry.config('https://**********@sentry.io/***').install();みたいな所のアドレス部分) Sentry APIでauth tokenを作成(設定はデフォルトでOK)、auth tokenをコピーしておく ダッシュボードに行き、プロジェクトのsettingsタブからNameをコピーしておく 左上のボタンからOrganization settingsに行き、Nameを
はじめに 今回はReactNativeの開発環境を整えGitHubと繋げることを目標として記事をまとめたいと思います。 開発に必要な道具 Node.js ReactNativeで開発を整えるのに必要になります。既にインストールされている方はターミナルにて以下のコマンドで調べることができます。インストールされていない方はここからインストールして下さい。 GitHub ReactNativeの開発環境を整えた際のコードなどをリモートに保存する際に利用します。GitHubを利用しなくてもReactNativeの開発環境は作れるので必要ない方はココをとばしても構いません。まだGitHubのアカウントを作成していない方はココから作成して下さい。 GitHub Desktop 一旦ローカル上にコードを保存する際に利用します。今回はDesktop版を経由してGitHubにコミット&プッシュしていきたいと
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }}> <View style={styles.testStyle}> <View style={{flex
2019年8月追記: Expo SnackがWeb対応したことを受けて、React Native公式ドキュメントのライブプレビューはreact-native-web-playerからExpo Snackに戻りました。 http://facebook.github.io/react-native/docs/activityindicator 記事の内容は古くなってしまいましたが、React Native for Webが内部で使われていることに変更はありません。 React Native公式ドキュメントのプレビューを支える技術 React Nativeの公式ドキュメントでは、コンポーネントの実際の表示をWeb上で確認できるプレビューが用意されています。 少し前まではAppetize.ioが使われていて、実機のスクリーンキャストらしきものを見ることができていました。今でもExpo Snackは
自己紹介 yatatsu PAY, inc. QRコード決済ができるお支払いアプリ「PAY ID」 Android, iOS, React Native FlatListとは リストを表示するためのコンポーネント Flat <=> Section https://facebook.github.io/react-native/docs/flatlist in Native App... UITableView, UICollectionView in iOS RecyclerView in Android 単純なScrollViewとの違いは? レイアウトの読み込み遅延と再利用 読み込み遅延 表示している部分+前後 大量のデータでもスムーズに動く スクロールに応じて順次読み込んでいく 読み込み遅延 in FlatList... VirtualizedList を継承 ScrollViewコ
自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程 react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html react-native 中文api文档 (翻译中) https://github.com/ecomfe/react-native-cn react.js中文文档
create app react-native init NaviTest test react-native run-ios lib install 1 Install react-native-navigation latest stable version. yarn add react-native-navigation@latest 2 Add ReactNativeNavigation.xcodeproj 以下をXCodeのライブラリに追加 ./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj 3 Build Phasesに追加 Build Phasesに追加 In Xcode, in Project Navigator (left pane), click on your proj
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く