React NativeアプリをReact Native for Web化する方法について解説
【ReactNative入門 】Macで開発環境を作って始める react-native-web関連パッケージを追加 続いて、react-native-webとwebpack等のパッケージを追加しましょう。 $ yarn add react-native-web // npmの方 $ npm install react-native-web $ yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack // npmの方 $ npm install --save-dev babel-plugin-react-native-web webpack webpa
Security · React Native
Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing
Core Components and APIs · React Native
React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following categories: Basic Components User Interface List Views Android-specific iOS-specific Others You're not limited to the components and APIs bundled w
React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介
ホームテクノロジーReact NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介 React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介 React Nativeアプリ開発でinnerHTML風な対応が要求された。APIの返り値にHTMLタグが含まれているデータをレンダリングするというものだ。 賢明なあなたにおかれては、<WebView/>を使えばいいじゃん！と思ったに違いない。 そう。そのとおりでWebViewによってHTMLタグを含んだ値をレンダリングすることが可能だ。しかし何かしらのイベントでHTMLタグに付与された属性値を参照する、という処理に悩まされてしまった次第である。 ひとしきりgithubやjs.coachを回遊して見つけたのが
React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新) - Qiita
ダメなライブラリ。 redux reduxはstate管理の素晴らしいライブラリだ。 世界で一番愛用され、情報量も多く、大規模システムに向いている。 しかし、react nativeを採用するのはほとんどがスタートアップだ。 学習コストが高い＋プロトタイプ制作が苦手なreduxはスタートアップにははっきり適さない。 reduxの代わりにcontext Api/MobXを使おう。Expo＋contextApi or MobX+web版のfirebaseがスタートアップでの最適解だと思う。 react-native-cli cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが２倍
React Native Expo+TypeScript超入門 - Qiita
概要 Microsoftが開発したAltJS (みんな大好きVSCodeと相性がいいよ！) 静的型付けとクラスベースのオブジェクト指向 JSの大規模開発に対応するために設計 JSのスーパーセット(上位互換)で コンパイルすることでJSにトランスパイルできる 何が嬉しいのか コンパイルで事前に怒られるのでエラーが一目瞭然 (JSのエラー追うの辛い) コードの影響範囲の抽出が容易なため変更に強い 型が付くことでメソッド・変数の意図がわかりやすい 型と付くことと、自然と行儀の良いコードになることで可読性向上 エディタの補完機能が強い (VSCode) 型推論によって初期値の型を採用してくれるため慣れてなくても書きやすい 基本の型 公式：Basic Types // Boolean let isDone: boolean = false; // Number let decimal: numbe
React NativeでGLSL書けるか試してみた | ランサーズ（Lancers）エンジニアブログ
この記事はランサーズ Advent Calendar 2017の21日目の記事です。 はじめまして、フロントエンドエンジニアの加藤です。8月からランサーズのユーザーファーストデザイン室というチームでデザイナーの人たちと一緒に働いています。 突然ですが、みなさんはglslsandboxを見て、知らない外人のお兄さんの作品を見て毎日感動してますよね？そして、うちの仕事では使う機会ないなぁと涙を流していますよね？ しかし、仕事は自分で勝ち取るものなのだと誰かが言っていました。どうやって今の仕事の環境の上で書けるかを試してみるといいかもしれません。以前、gl-reactを使ってReactで書いたアプリケーションの上でGLSLを書ける方法を試したことがありますが、現在であれば一番新規フロントエンド開発で選定されそうなReact Nativeで書ければ、もしかしたら仕事で書けるかもしれません！ GLS
正しいReact Nativeの環境作り（Mac / 2018年度版） - Qiita
追記（2019/1/18）：create-react-native-appがexpo-cliに統合されたという情報をいただき、修正しました。 ・公式docs https://facebook.github.io/react-native/docs/getting-started.html React Nativeプロジェクトを作成するには、以下の二つの方法があります。 ① expo CLIを使う ② React Native CLIを使う ① expo-cliを使う Github：https://github.com/expo/expo-cli/ ドキュメント：https://docs.expo.io/versions/latest/workflow/expo-cli Expo CLIとは expo-cliを使用することで、expoというiOS/Androidアプリを通じて、ビルド不要のデ
Windows 環境の expo-cli で react native をやろうとして環境構築で詰まった箇所 - Qiita
info There appears to be trouble with your network connection. Retrying... yarn でこのエラーが出た場合は、 --network-timeout 1000000 をつければいいという記事もあったのですが、これでは解決せず、インストール対象のうち2つがインストールができずでした。 結局これは原因が分からず… npm で下記コマンドでインストールしました。 これも何か Linux 用の何かが足りないというようなエラーが出たのですが、その日は寝て次の日やり直したらインストールできてしまったので、エラーをメモってなく。 WSLを使えるようにしたのが関係してたかもしれませんが、怪しいまま次に進むことに…。 エラー２：QRコードを実機で読み取っても正しく表示できない 無事 expo-cli でプロジェクトを作成し、起動できる
React NativeでTextを角丸のボタンっぽい見た目にする - Qiita
React NativeでTextを角丸のボタンっぽくする時に少しハマったのでメモ まず、borderRadiusで角丸にする方法 <Text style={{ backgroundColor: "lightblue", padding: 10, borderRadius: 20, borderWidth: 1, borderColor: "lightblue", overflow: "hidden" }} > Button </Text> overflow: "hidden"をつけるのがポイントです。 こんな感じになります。 このままだと横幅いっぱいになってしまうので、文字長に合わせたWidthにするには、親要素にflexDirection: "row"をつけてあげると大丈夫です。 <View style={{ flexDirection: "row" }}> <Text style={
TypeScriptでReact Native開発をする方法2018年最新版 - bagelee（ベーグリー）
セットアップ React Nativeプロジェクト作成 プロジェクト作成直後という前提で説明しますので、適当な名前でプロジェクトを作成しましょう。 $ react-native init <プロジェクト名> $ cd <プロジェクト名> ライブラリのインストール devDependenciesに依存関係を追加します。依存関係については、こちらの記事で詳しく説明しています！ $ yarn add --dev typescript react-native-typescript-transformer $ yarn add --dev @types/react @types/react-native typescript はTypeScriptの本体、 react-native-typescript-transformer はReact NativeからTypeScriptを読み込むために必要
Audio
import { useEffect, useState } from 'react'; import { View, StyleSheet, Button } from 'react-native'; import { Audio } from 'expo-av'; export default function App() { const [sound, setSound] = useState(); async function playSound() { console.log('Loading Sound'); const { sound } = await Audio.Sound.createAsync( require('./assets/Hello.mp3') ); setSound(sound); console.log('Playing Sound'); await s
React Native for WebとExpoを組み合わせてピコピコさせてみたよ - Qiita
なかざんです。ウォーターセルという新潟の会社でアグリノートという農業向けアプリを作っています。 業務で使う構成のPoCとして、Webとモバイルネイティブの両方で動く、React Nativeのサンプルプロジェクトを作ってみたので、そこで得られた知見をご紹介します。 つくったもの 私たちが愛してやまないJetBrains製IDEのアイコンとボタンを並べて、ボタンを押すと製品ページに行けるアプリです。押したときにはピコッと鳴ります。 ソースコードはこちら。 https://github.com/Nkzn/react-native-multi-target-sample ネイティブ版はこんな感じです。 Webアプリ版はこんな感じ。 見てもらったほうが早い 今回は実物を触ってもらいやすい環境が作れたので、実際に触ってみたほうが雰囲気がつかみやすいと思います。 ネイティブ版 ネイティブ版はExpoで
【2018年版】React NativeでiOSアプリを作ってストアでリリースしてみた - Qiita
はじめに React Nativeでの開発が全体的にどんな感じか掴みたかったので、小さなアプリを開発し、App Storeでリリースしてみました。 プロジェクト作成からストアでのリリースまでの間、開発中に出てきたテーマを振り返ってみます。（React Nativeの概要や特徴の解説については、他の方の記事をご覧ください。） 今回の一連の開発を通して、現段階ではネイティブ側（Xcode）を触らないといけない場面がちらほらあるということが分かりました。 ※記事執筆時点のReact Nativeのバージョンは0.43です ※2020年に別のアプリを作った記事を投稿しました【2020年版】 React NativeでiOSアプリを作ってストアでリリースしてみた - Qiita ※筆者はiOSアプリの開発経験者です（Swift, Objective-C） ご注意 本記事の執筆時点に対して、最新のRe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-native-cli
GitHub - react-native-community/cli: React Native command line tools
Expo CLI
GitHub - expo/expo-cli: Tools for creating, running, and deploying universal Expo and React Native apps
React-Native: Substitute for flex-basis
Audio