(4) PC自作から始めるスマホアプリ開発 #8 React Native基礎編 ウェブAPIからデータを取得する - YouTube Handling the Screen Orientation of React Native Apps Without any Third-party Packages (youtube.com) これは3年前のもので、クラス型コンポーネ…

まず、ミラーリングについて説明します。 ※ミラーリングとは？ 純正ナビでスマホの画面を映したい場合にはいろいろ方法がありますが、 どの種類の入力ポートがあるかにもよりますが、HDMI入力ポートを利用できるなら、ミラーリングを使用する方法があります…

前回の用途で行くと、ボタンは縦横にできるだけ大きい方が、リモコン操作でカーソルを合わせやすいとのことで、React NativeでButtonコンポーネントをみると、heightを設定できないとのこと。 幅だけなら、Viewコンポーネントで挟んで、Viewの方に、widthプ…

npx expo startするだけなら、依存するライブラリは不要だが、 ビルドするとなると以下のように、依存するライブラリのインストールと、babel.config.jsの修正・追加が必要です。 module.exports = function(api) { api.cache(true); return { presets: ['ba…

【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) - YouTube ひきつづき上記のYoutube動画を参考にして、React Nativeで作成してみます。 （プロジェクト名）/App.js import { StatusBar } from 'expo-status-bar';impor…

React-NavigationのStackと似ているのだが、①依存するライブラリーのインストールとと②設定をいじる必要がある。 Drawerを使用するなら、React-Navigationのバージョンはすべて@6でインストールしておかないとエラーに悩まされる。 ①Drawer Navigator | Reac…

どんなアプリを作成するかというと、 Firebase Authenticationで認証を行い、それが認証されたら、アプリのホーム画面へ行ける。 ホーム画面に『登録画面』ボタンを配置し、それを押すと、登録画面へ遷移。 登録画面には、 タイトル（title)を記載するテキス…

CSSのmarginとは？paddingとは？余白の指定方法まとめ (saruwakakun.com)

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, TextInput, View } from 'react-native'; import {useState} from 'react'; export default function App() { const [name, setName] = useState(''); return ( <View style={styles.container}> <Text>Open up App.js t</text></view>…

React Nativeで、Tailwind CSSを使用する場合、 Tailwind-rn あるいは、twrnc を使用する 前者は設定でつまづいたので、後者を使用する。configファイルが作成されないため設定はあまりできないが、使用しやすい。 自分でつくるのもよいが、これまでのテンプ…

下記HPを参考にしました。 VSCodeでGit・GitHubを使う方法を解説する【初心者向き】 (miya-system-works.com) まず、GitがPCにない場合はインストールし、設定を行います。 次にGitのローカルリポジトリを作成します。 任意のフォルダを作成し、それをVSCode…

ここでは、おなじみのカウンター（１ずつ増える機能のみ）を、わざわざ生のreduxを使って作ろうという試みです。 ［今は、Reactでは、reduxは非推奨になっており、redux-toolkitが推奨になっているのに、わざわざという面はあるでしょうが、本質を学ぶために…

App.jsと同列に、store.jsを作成する （プロジェクト名）/store.js import {texts as reducer} from './reducers/texts'; import {createStore} from 'redux'; import {Provider} from 'react-redux'; const store = createStore(reducer); export default s…

いろいろ『APIとは？』について説明しているページがありますが、実際手を動かしたほうがわかりやすいかもしれません。 まず、ここでは、1つ目として、Zip Cloud APIを利用します。 これは、郵便番号を入れて、APIをたたくと、住所他の情報が返ってくるAPIで…

Firebaseとは？ (193) 【001】Firebaseとは - YouTube FirebaseはGoogleが提供するサービスです。

いいHPがあったのでそれを参考にします。 個人でも使える！おすすめAPI一覧 - Qiita

ここでは、下記のYoutubeをみて学習し作成していきます。 (364) 初心者でもできるスマホアプリの作り方【ReactNative入門】 - YouTube ただし完成例はここでは上げない予定で、作成する際に、つまづきやすいと思われるポイントを勝手に解説していく予定です。

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import React from 'react'; import { TextInput } from 'react-native'; import {collection, addDoc,getFirestore } from 'firebase/fires…

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View,TextInput,Button } from 'react-native'; import React from 'react'; import {getAuth,signOut,onAuthStateChanged} from 'firebase/auth'; import {getApps, initializeAp…

import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; fun…

まず、普通に作成すると下記のようになる。 Stateをどのコンポーネントに作成するかは重要である。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; functi…

まずシンプルに作成 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [count, setCount] = useState(0); const inc…

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'; import { useState } from 'react'; const DATA = [ {id:'1', title:'テキスト１'}, {id:'2', title:'テキスト２'}, {i…

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, TextInput, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [name, setName] = useState(""); const [nameText, s…