2023/08/06
react-native
## React-Native環境構築(Android)
### 参考
[公式環境構築手順](https://reactnative.dev/docs/environment-setup)
[Microsoft構築手順](https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/react-native-for-android)
### 手順
1. nodejsインストール
1. react-native-cliインストール
```
npm i -g @react-native-community/cli
```
1. [Chocolateyインストール](https://chocolatey.org/install)
1. Open JDK 11 インストール
```
choco install -y openjdk11
```
1. [AndroidStudioインストール](https://developer.android.com/studio)
1. AndroidStudioでAndroid 11 (R) SDKをインストール
1. 環境変数追加
- 変数名：ANDROID_HOME
- パス：C:\Users\[ユーザー名]\AppData\Local\Android\Sdk
1. PATH環境変数に`%LOCALAPPDATA%\Android\Sdk\platform-tools`を追加
1. react-nativeプロジェクト作成
- 通常
```
npx react-native init AwesomeProject
```
- TypeScriptあり
```
npx react-native init AwesomeTSProject --template react-native-template-typescript
```
1. AndroidStudioでエミュレーターを登録し、立ち上げる
1. MetroBundlerを起動'(webpackみたいなやつ
```
npx react-native start
```
1. 新しくターミナル開き、下記を開くとエミュレーターでアプリケーションが起動する
```
npx react-native run-android
```
※ ホットリロード機能があるため、プログラムを修正して保存すると、即座にエミュレーターに反映される
## Expo環境構築
1. [Expoアカウント登録](https://expo.dev)
1. 実機にExpoアプリをインストール
1. プロジェクト作成
```
npx create-expo-app my-app
```
1. 起動
```
npx expo start
```
1. 実機でバーコードを読み込み確認
※ ホットリロード機能があるため、プログラムを修正して保存すると、即座に実機に反映される
## ルート管理
### 参考
- https://reffect.co.jp/react/react-navigation
### 導入
1.
```
npm i @react-navigation/native @react-navigation/native-stack
```
1.
```
npm install react-native-screens react-native-safe-area-context
```
※ expoの場合、`npm install`でなく `expo install`でインストール
### サンプルコード
```js
import React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const HomeScreen = ({ navigation }) => {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Go to User"
onPress={() => navigation.navigate("User", { userId: 1 })}
/>
</View>
);
};
const UserScreen = () => {
return (
<View>
<Text>User Screen</Text>
</View>
);
};
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="User"
component={UserScreen}
options={({ route }) => ({
title: `ユーザーID${route.params.userId}の画面`,
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
```