React-Nativeを使ってiOSアプリを作ってみる(その1 環境構築) 

# はじめに

Reactの勉強を兼ねてiOSアプリを作ってみる事にしたので備忘録です。
普段はC++/C#/で開発しているのでReactやiOSのアプリに関しては初心者ですので、
至らぬ点も多いと存じますが、ご容赦いただけますと幸いです。

内容はほぼ以下のリンクのIntroductionを試しただけです。
[React-Native(公式)](https://reactnative.dev/)

後日、以下追加する予定
[React-Nativeを使ってiOSアプリを作ってみる(その2 画面遷移) ](https://qiita.com/rsm223_rip/items/402e781c94a5d33d9bfc)
[React-Nativeを使ってiOSアプリを作ってみる(その3 C++でモジュール作成)](https://qiita.com/rsm223_rip/items/a85f70043024776875f3)

# なぜReact-Nativeにしたか

アプリを作ろうと考えた段階では適当にググってAndroidとiOSのクロスプラットフォーム開発できるフレームワークを使おうと思い`C#(.NET MAUI)`,`React-Native`,`Vue-Native`を候補に考えてました。  
しかし、以下の点からReact-Nativeを使ってみる事にしました。

1. mac環境にVisualStudioを入れるのがめんどくさい
1. vue-nativeは`廃止`されたそうです。。。
    [Vue Native(公式)](https://vue-native.io/)
    >  ⚠️ Vue Native has been deprecated and is no longer maintained. 

# 開発環境について

こんな感じです。

```bash
user@macbook ~ % sw_vers 
ProductName:	macOS
ProductVersion:	11.7.9
BuildVersion:	20G1426
user@macbook ~ % node -v  
v18.13.0
user@macbook ~ % npm -v
9.8.1
```

# 環境構築

[Setting up the development environment](https://reactnative.dev/docs/environment-setup?guide=native)に以下のように書いてあるので、
Node,watchman,CcoaPodsをインストールしていく。
(Xcodeはインストール済みなので割愛、react-nativeは`npx`でプロジェクト作成時にインストールされるらしい)

> You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.

```bash
brew install node
brew install watchman

# なんかこれだけactivesupportのインストールとかやらないと入らなかった。
gem install cocoapods
```

## プロジェクトの作成

```bash
# プロジェクトの作成は以下のコマンドを実行
npx react-native@latest init AwesomeProject

# react-native-cliがあると作成に失敗するらしいので、インストールされてたら消しておくこと
npm uninstall -g react-native-cli @react-native-community/cli

# 作成できていれば、こんな感じでフォルダやファイルが作成される
user@macbook AwesomeProject % tree ./ -L 1
./
├── App.tsx
├── Gemfile
├── Gemfile.lock
├── README.md
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── jest.config.js
├── metro.config.js
├── node_modules
├── package.json
├── tsconfig.json
├── vendor
└── yarn.lock

7 directories, 12 files
```

## iOSアプリで使う依存関係のパッケージをインストールする

CocoaPodsがiOSアプリの依存関係をマネジメントしてくれるらしいです。
(npmとかでパッケージを追加したときもpodのinstall/updateで依存するパッケージとかを入れてくれる。)

```bash
# iosディレクトリで以下を実行する。
bundle install
bundle exec pod install
```

# アプリを実行する

```bash
# シミュレータが立ち上がっていればコマンドじゃなくてもOK
open -a Simulator

# シミュレータでアプリが実行される。(初回はビルドに結構時間がかかる)
npm start
npm start ios
```

# とりあえずHelloWorldする

とりあえず挨拶は大切ですよね。
App.tsxがデフォルトで表示されるが、とりあえずindex.jsを書き換えてHelloWorldを表示させる。

```jsx:index.js
/**
 * @format
 */

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
//import App from './App';
import { name as appName } from './app.json';


export class HelloWorldApp extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Hello, world!</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent(appName, () => HelloWorldApp);
```

こんな感じの画面が出ればOK
参考は以下
[【入門】はじめての React Native](https://qiita.com/nskydiving/items/41e446ef5c821359ab79)

![simulator_screenshot_17B86BCC-A6D9-4312-956B-61B5C1927CB9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276495/2a1a3cc1-723d-9b2f-0126-b4192d2da49b.png)