🥻

ReactNativeに入門してみる

2024/01/21に公開

Android

Overview

https://reactnative.dev/
公式によると???

一度学習すれば、どこでも書くことができます。

React を使用して Android、iOS などのネイティブアプリを作成する
React Native は、ネイティブ開発の最良の部分と、ユーザーインターフェイスを構築するためのクラス最高の JavaScript ライブラリである React を組み合わせたものです。

少量、または大量に使用してください。既存の Android および iOS プロジェクトで React Native を今すぐ使用することも、まったく新しいアプリを最初から作成することもできます。

JavaScript で記述され、ネイティブコードでレンダリングされます
React プリミティブはネイティブプラットフォーム UI にレンダリングします。つまり、アプリは他のアプリと同じネイティブプラットフォーム API を使用します。

多くのプラットフォーム、1 つの React。プラットフォーム固有のバージョンのコンポーネントを作成して、単一のコードベースでプラットフォーム間でコードを共有できるようにします。React Native を使用すると、1 つのチームが複数のプラットフォームを維持し、共通のテクノロジーである React を共有できます。

書くときは、JavaScriptだけど、レンダリングされるとSwiftとかKotlinになるのか?、ObjectivecとかJavaになると聞いたことあるけど???

summary

Expo Go

環境構築をしてみる。インストールはすごく遅い😅

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

こんなlogが出る:

Androidやってみたがビルドできない???

ReactNative CLI

こっちの方法で環境構築をしてみる:

brew install node
brew install watchman

すでにインストールしてるみたいだったが、これを使うようだ???

npm uninstall -g react-native-cli @react-native-community/cli

プロジェクトを作りたい場所でこのコマンドを実行する:

npx react-native@latest init AwesomeProject

😇インストールできない!!!

ゴミやんけ!
SwiftとKotlinは簡単にプロジェクト作れる!!!

海外の動画を参考にインストールするとやっと使えた?

https://docs.expo.dev/
これを使ってプロジェクトを作る

npx create-expo-app my-app

これがデフォルトのコードか?

書き換えたHello Worldしてみる。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello ReactNative😇</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

許可いるの????

iOSのビルドコマンド:

npm run ios

androidのビルドコマンド:

npm run android

とりあえず、iosでビルドはできた...

thoughts

すごく使いずらいです💦
２度と触りたくない。開発体験が悪いですね。SwiftとKotlinで書いた方がコードはやく書けるし公式ドキュメントやネットの情報が充実してるから、僕は使いやすいなと感じました。なんでネイティブで作ろうとしないのだろう???

Flutterも使ったことあるが、あっちはそんなに手間ではなかった...
今なら、SwiftUIとJetpack Composeがあるからプロジェクト作ってビルドできるこっちをお勧めします😇