はじめに

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

内容はほぼ以下のリンクのIntroductionを試しただけです。
React-Native(公式)

後日、以下追加する予定
React-Nativeを使ってiOSアプリを作ってみる(その2 画面遷移)
React-Nativeを使ってiOSアプリを作ってみる(その3 C++でモジュール作成)

なぜReact-Nativeにしたか

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

mac環境にVisualStudioを入れるのがめんどくさい
vue-nativeは廃止されたそうです。。。
Vue Native(公式)

⚠️ Vue Native has been deprecated and is no longer maintained.

開発環境について

こんな感じです。

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に以下のように書いてあるので、
Node,watchman,CcoaPodsをインストールしていく。
(Xcodeはインストール済みなので割愛、react-nativeはnpxでプロジェクト作成時にインストールされるらしい)

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

brew install node
brew install watchman

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

プロジェクトの作成

# プロジェクトの作成は以下のコマンドを実行
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で依存するパッケージとかを入れてくれる。)

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

アプリを実行する

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

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

とりあえずHelloWorldする

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

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