はじめに
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を表示させる。
/**
* @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
