ReactNativeに入門してみる
Overview
公式によると???
一度学習すれば、どこでも書くことができます。
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は簡単にプロジェクト作れる!!!
海外の動画を参考にインストールするとやっと使えた?
これを使ってプロジェクトを作る
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があるからプロジェクト作ってビルドできるこっちをお勧めします😇
Discussion