Zenn
🙆

M2 MacBook Air 上で手っ取り早く React Native で Hello world! までやる

2023/03/19に公開
React Native
helloworld
tech

概要

掲題の作業を実施したのでその手順のメモ

環境

  • プラットフォーム
    • 2022年製の MacBook Air (チップ: Apple M2)
      • OS: Ventura 13.2
  • Node.js v18.13.0

Node.js のインストール

方法はなんでもいいけど Node.js をインストールする

自分は Volta を使っている

https://zenn.dev/aiueda/articles/7dcecaa05d4f24

Expo CLI のインストール

下記コマンドでグローバルにインストール

$ npm install -g expo-cli

react-native-cli と CocoaPods を使うやり方もあるらしいが、CocoaPods 自体 Ruby だし依存関係が言語横断で増えるのはどうなんだろうと思った

Expo を使えば CocoaPods を使う必要はなさそう。
ただし、Expo は Expo で独自の制約があるらしく、すべてのReact Nativeプラグインや機能が利用可能というわけではないらしい。
ネイティブモジュールを直接使用する必要があるなら、CocoaPodsを使用しなければいけない局面も出てくるとのこと

React Nativeプロジェクトを作成

$ expo init HelloWorld

Hello world! テキスト編集

プロジェクトのルートに移動する

$ cd HelloWorld

デフォルトだとルートのコンテナで出力するテキストは "Open up App.js to start working on your app!" になってるのでこれを "Hello world!" に変える

$ vi App.js

$ git diff App.js
diff --git a/App.js b/App.js
index 09f879b..84a65e2 100644
--- a/App.js
+++ b/App.js
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Text>Hello world!</Text>
       <StatusBar style="auto" />
     </View>
   );

expo start

$ expo start

これで、以下のようにシミュレーター上で Hello world! を出せる

Discussion