react-native

要はブラウザ委のストレージのような機能をアプリでどう再現するかを調べてみた。 iOSでは KeyChain、Androidでは KeyStoreという安全に重要情報を保存できる場所が用意されているらしい。 Expo Cliではreact-native-keychainが使えない。 で、React Nativeではreact-native-keychainというプラグインで実現できるらしいが、Expo Cliでは使えないらしい。これは落とし穴だった。結構な時間を溶かした。 expo-secure-storeを使用しよう 公式サイト npx expo install expo-secure-store でインストールする。 app.jsonに下記を追加する。 { "expo": { "plugins": [ [ "expo-secure-store", { "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data." } ] ] } } 実装 ログインボタンを押したときにアクセストークンを保存する。 <Button title="Log in" onPress={async () => { try { // ログイン処理 // トークンを保存してメイン画面に遷移 await SecureStore.setItemAsync("accessToken", "userToken"); navigation.navigate("Main"); } catch (error) { console.error("SecureStore error: ", error); } }} /> 遷移先のページでチェックする。...

2年前からreact nativeでアプリを作成している。 が、いろいろ（他のアプリ作ったり、仕事が忙しくなったり）あり放置気味で、重い腰を上げるかと「完成」を今年の目標に入れた。 GoでApi作成し、結合しようかと思ったところスマホのExpoアプリで開発中のアプリが開けなくなっていた。 原因はExpoのバージョンがずれていたこと。 スマホのアプリのアップデートを自動にしているので、どうやら開発側とずれてしまっていたらしい。 スマホアプリのバージョンを落としてもいいのだけれど、開発側のアップデートをすることにした。 Expo SDK のアップグレード まんま上記の通り実行すれば問題ない。 npm install expo@latest npx expo install --fix これで無事に開発を続行することができるようになった。

API作成が一段落した Goの勉強でAPIを作成してきたが、やっと一段落した。 そこでアプリ側から叩こうとした結果、エラーが出たので原因を理由を調査してみた。 Goで立ち上げたサーバ http://localhost:8081/api/v1/endpoint のローカルIPアドレス http://172.19.176.1:8081/api/v1/endpoint にReact Nativeで作成したアプリからアクセスしてみる。 ネットワークリクエストが失敗しました 結果、 TypeError: Network request failed というエラーが出力された。 ファイアーウォールが関係している？ 【react-native】シュミレータでAPIアクセスを行う際にnetwork errorの記事を参照するに、CORSかしらって思ったけど、アプリでCORSはちょっと違う気がする。 アプリにドメイン存在しないので、どのドメインを許可すればいいのっていうことになる。 で、色々調査していると、ファイアーウォールが関係している気がしてきた。 Windows向けプログラムに搭載されているファイアウォール（パーソナルファイアウォール）機能は、ネットワークプリンターや他のコンピューターとの通信を遮断する場合があります。その場合は、該当する通信を許可するルールを作成することで、通信ができるようになります。 https://eset-support.canon-its.jp/faq/show/235?site_domain=default ポートを開放すればいける感じかもしれないけど、せっかくだしサーバーにあげてみることにした。 どうせいずれあげる必要があるしね。

過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。 実装に期待する動きは、 タブ移動が可能 タブ移動後に詳細ページへの遷移が可能 上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。 その前提で進めていく。 必要なパッケージをインストールする npm install @react-navigation/stack npm install react-native-gesture-handler インストール後、必要なファイルを作成する。 実装していく mkdir src mkdir src/stack touch src/screens/SampleStackScreen.tsx SampleStackScreen.tsxは下記の通りになる。 import React from 'react' import Sample from '../screens/Sample' import { createStackNavigator } from '@react-navigation/stack' import SampleDetail from '../screens/SampleDetail' const Stack = createStackNavigator() const SampleStackScreen = () => { return ( <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Sample" component={Sample} /> <Stack.Screen name="SampleDetail" component={SampleDetail} /> </Stack....

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 mkdir src mkdir src/screens touch src/screens/Sample.tsx 適当に作成する。 Sample.tsxは import React from "react"; import { ScrollView, View, Text } from "react-native"; const Sample = () => { return ( <ScrollView> <View> <Text>Sample</Text> </View> </ScrollView> ) } export default Sample; こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 import Sample from './src/screens/Sample' export default function App() { return ( <Sample /> ) } 同様にSample2とかを作成する。...