React 使ったことないけど React Native 使う事になったから頑張ってお勉強します
公式の Docs を見た時のメモを記載
（メモなので非常にゆる〜くふわっとしてる）
わかるレベル
React はほぼ触れてないけど Vue.js は結構触っている
JavaScript は大好き
Youtube で React の動画は見てるので用語だけなんとなく知ってる
React Native とは
Reactの書き方でマルチプラットフォームなアプリが作れる
最終的にSwiftとかKotlinとかHtmlCssとかになるみたい
最近流行りのFlutterとの一番の違いはネイティブUIなのか独自のUIなのかって感じらしい
ReactNativeで書いたやつはiOS、Android、ブラウザそれぞれでコンポーネントの見た目が違う
つまり全部テストしないといけない・・・？
参考
これの「The Basics」を一通り見るだけでなんとなくわかった気になれる
コンポーネントの書き方に、関数とクラス両方の書き方を紹介してくれているのでとても助かる
（ネットの記事はクラスだけだったりが多かった）
ソースは全部公式 Docs から引用
基本的な使い方
import React from "react";
import { Text, View } from "react-native";
const YourApp = () => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Try editing me! 🎉</Text>
</View>
);
};
export default YourApp;
こいつらなんやねん！ →View Text
React Native が用意してくれてる Components
ここで探せば色々見つかる
基本的な物として紹介されてたヤツら
- View
- とりあえずこれ書いとけばいい感じに見た目を調整してくれるらしい
- <div>になるみたい
- Text
- 読んで字のごとく
- <p>になるみたい
- Image
- 読んで字のごとく
- <img>になるみたい
- ScrollView
- View のスクロールしてくれる版
- <div>のスクロールでいる版（overflow:scrollが付いた版？）になるみたい
- TextInput
- 読んで字のごとく
- <imput type="text">になるみたい
そもそも React の書き方知らんがな
そんな奴はまず React から勉強してこいとか言わないで・・・
大体このページの流用
JSX
Vue.js だと 1 つのファイルに
- template に html
- script に js
- style に css
と分けて書くけど、React は全部 js で書くらしい
js で書いてるから当然 ↓ みたいに変数だって使えるし
const Cat = () => {
const name = "Maru";
return <Text>Hello, I am {name}!</Text>;
};
関数を代入する事もできる
const getFullName = (firstName, secondName, thirdName) => {
return firstName + " " + secondName + " " + thirdName;
};
const Cat = () => {
return <Text>Hello, I am {getFullName("Rum", "Tum", "Tugger")}!</Text>;
};
色々試してて思った・・・
if 文や for 文を return 内で書けるのは便利だった
vue だと v-if とか v-for を使うけど、結構 template が煩雑になるし、思うように動かせない場合がある
その点 React はもろ js なので汎用性が高い
const Cat = ({ name }) => {
if (name) {
return <Text>Hello, I am {name}!</Text>;
} else {
return <Text>I am a cat. I don't have a name yet.</Text>;
}
};
三項演算子とかもいける
const Cat = ({ name }) => {
return name ? <Text>Hello, I am {name}!</Text> : <Text>I am a cat. I don't have a name yet.</Text>;
};
ただし return()内の{}の中に if とか for みたいな構文は書けないらしい
そのときは ↓ のように関数を利用する
const CatCaffe = () => {
const cats = ["mugi", "sora", "reo", "koko"];
return (
<View>
{cats.map((cat) => {
return <Text key={cat}>Hello, I am {cat}!</Text>;
})}
</View>
);
};
js だからとやりたい放題したらぐちゃぐちゃになりそう
何事もバランスが大事
その内調べる
この return は何を返してるんだろう・・・""で括ってないから文字列でもなさそうだし
独自でコンポーネントを作る
↑ の Cat は関数だけど、これを他の関数で流用することも可能
const Cat = () => {
return (
<View>
<Text>I am also a cat!</Text>
</View>
);
};
const Cafe = () => {
return (
<View>
<Text>Welcome!</Text>
<Cat />
<Cat />
<Cat />
</View>
);
};
Props
親コンポーネンとから子コンポーネントへ情報を渡すときは関数の引数として渡す
引数名はなんでもいいっぽいけど props にするのが推奨ぽい
const Cat = (props) => {
return (
<View>
<Text>Hello, I am {props.name}!</Text>
</View>
);
};
const Cafe = () => {
return (
<View>
<Cat name="Maru" />
<Cat name="Jellylorum" />
<Cat name="Spot" />
</View>
);
};
State
状態の変化を検知したいときは State を使う
Vue.js でいう computed？
↑コメントにて指摘をいただきました
どちらかというとdataに近いもので、コンポーネント内で所有するものみたいです
公式のフック早わかりがわかりやすかったです
関数コンポーネントとクラスコンポーネントで書き方が違うけどとりあえず関数コンポーネントがおすすめらしい
関数コンポーネントの書き方は Hooks って呼ぶみたい（フック）
変数とセッター？を１行でかけるから便利！
import React, { useState } from "react";
const Cat = (props) => {
const [isHungry, setIsHungry] = useState(true);
return (
<View>
<Text>
I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
</Text>
<Button
onPress={() => {
setIsHungry(false);
}}
disabled={!isHungry}
title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
/>
</View>
);
};
フラグメント
注釈として書かれていたけど、へーって思ったので一応記載
const Cafe = () => {
return (
<>
<Cat name="Munkustrap" />
<Cat name="Spot" />
</>
);
};
今まで<View></View>で囲っていたけど、急に出てきた<></>
１コンポーネントは１要素で囲まれなきゃいけないから、View って毎回書かなきゃいけないのかなと思っていたら
<></>これで囲んだらとりあえず OK みたい
ScrollView の注意点
これ使うだけでスクロールが簡単に実装できる
けど・・・・画面内に収まっていない物でも全部レンダリングするからパフォーマンスが悪いっぽい
アイテムのリストが長すぎる場合は FlatList を使うんだって
リスト表示
FlatList に data と renderItem を渡すことでリストを表示できる
いっぱいデータがある場合 ScrollView で表示するよりこっちの方がいいみたい
const FlatListBasics = () => {
const data = [
{ key: 1, value: "Devin" },
{ key: 2, value: "Dan" },
{ key: 3, value: "Dominic" },
];
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text style={styles.item}>
{item.key}:{item.value}
</Text>
)}
/>
</View>
);
};
style の書き方
SectionList の例から抜粋
StyleSheet は react-native のモジュールみたい
import { SectionList, StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: "bold",
backgroundColor: "rgba(247,247,247,1.0)",
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
const SectionListBasics = () => {
return (
<View style={styles.container}>
<SectionList
sections={sections}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
};
Vue.js のクラスバインディングとかとで、普通の css ならfont-sizeなのがfontSizeになってるので注意
スタイルも全部 js でかけるし js 好きにはうれぴい
なんだか tailwindcss とかと相性良さそうだな〜と思った
ReactNative で React の UI コンポーネントは使えるのだろうか・・・
material-uiの見た目好きなんだが
まとめ
こんな感じで ReactNative には色んなコンポーネントが用意されていて
それを使えば各プラットフォームに対応した UI が簡単に作れるらしい
しかも React の JSX は UI の記述も JavaScript ベースなので色々できる
Vue.js で学んだことは結構生かせるし、それを元にマルチプラットフォームなアプリが簡単に作れるとか神か！
これからちゃんと勉強しまっす
どうでもいい話
１年前友達に「ReactNative 勉強し始めたわ」って LINE してた
そしてちょうど１年後に「ReactNative 勉強し始めたわ」ってまた LINE しちゃった
一度挫折したことがバレた