---
# System prepended metadata

title: React Nativeまとめ
tags: [react-native]

---

---
tags: react-native
---
# React Nativeまとめ

## インストール

### Node.js
anyenvからnodenvをインストール

```bash
$ brew install anyenv
$ anyenv install nodenv
```

### watchman
ファイルの更新を検知する

```bash
$ brew install watchman
```

### flow
静的型チェックを行う

```bash
$ brew install flow
```

### react-native-cli
プロジェクトの初期化などに利用する

```bash
$ yarn global add @react-native-community/cli 
```

### react-dev-tools
インスペクタと連携して、コンポーネントをChromeから確認可能

```bash
$ yarn global add react-devtools@^3
```

### CocoaPods
React NativeはiOSでは、CocoaPodsでネイティブコードを管理する。
```bash
$ sudo gem install cocoapods
```

### Android Studio

```bash
$ brew cask install android-studio
```

## 起動
### プロジェクトの初期化
```bash
$ react-native init testProject --template react-native-template-typescript
```
	
ネイティブ層の依存パッケージをインストールする。
```bash
$ cd ios
$ pod install
```

iOSのシミュレーターを起動
```bash
$ react-native run-ios
```

サーバーを起動
```bash
$ react-native start
```

xcodeで起動
```bash
$ xed -b ios
```

#### Metro Bundler
* アプリ起動時に立ち上がる
* TypeScirptファイルのバンドルを行う
* 処理をキャッシュして、差分コンパイルを行う
* ディレクトリの移動を行った場合、更新されないことがあるので、キャッシュを削除する必要がある
* 実際のアプリ配布時は、Metro Bundlerサーバーを経由しないため、バンドル済みのJavaScriptをアプリに含めて配布する

## React Native コンポーネント
### View
* 基本となるコンポーネント
* 何も表示しない 



### Text
* 文字列を表示するときは、必ずTextコンポーネントを使う

### Image
* 画像を表示する時に利用する
* 指定方法
	* JavaScript層
		* プラットフォーム共通で使用できる
		* アイコンなどで利用
	* ネイティブ層
		* Asset Catalog (iOS), drawable (Android)で表示する
	* URLでの指定
		* ネットワーク上の画像を指定
		* コンテンツ画像を同封すると、アプリサイズが大きくなるため、ネットワークから取得するのが良い
		
### ImageBackGround		
* 背景画像を表示

### ScrollView
* 画面外で描画されるコンポーネントの描画をスキップ

### FlatList
* 配列を表示する

### SectionList
* TODO

### Touchable
* ボタン系のコンポーネント
* TouchableWithoutFeedback
	* 押しても見た目が変化しない
* TouchableOpacity
	* 押したら透明度が変化する
* TouchableHighLight
	* 押したら背景色が変化する
	
### TextInput
* ユーザーの入力を受け取る

## Utility

### Alert
* アラートメッセージを表示

### AppState
* 状態が変更したときの処理
* State
	* active
		* フォアグラウンドにあるとき
	* inactive
		* androidではない
		* iosではアプリ一覧、backgroundに移行するとき
	* background
		* ホーム画面や他のアプリがフォアグラウンドにあるとき

### Clipboard
* クリップボードの状態を取得、新しい値を設定する


### Dimensions
* デバイスサイズの取得
* デバイスの向きが変わったときの処理の指定

### Linking
* URLを開く

### Vibration
* デバイスのバイブレーション機能を使用

### WebView
* URLから取得したWebページを表示する

### ScrollView
* スクロール可能にする

### SafeAreaView
* 文字が見えづらい領域で表示されないようにする

### データの受け渡しについて
* App -> WebView
	* injectJavaScript
		* JavaScriptのコードをWebViewで実行できる
* WebView -> App
	* onMessage
		* window.ReactNativeWebView.postMessage
		
## Navigation
* iOS, Android両OSに対応するため、サードパーティのreact-navigationが利用される
* Webと基本的に同じだが、URLを入力して移動できないので、容易にたどり着けるようにする

* react-naviagation
	* ナビゲーション

* react-navigation-stack
	* 画面の履歴

* react-native-reanimated
	* アニメーション
	
* react-native-gesture-handler
	* ジェスチャー管理

* react-native-screens
	* Screen

* react-native-safe-area-context
	* セーフエリア

* @react-native-community/masked-view
	* MaskedView

```bash
$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

## スタイルについて
### style props
* HTMLと同じように、CSSを適用してスタイルを変化させることができる。
* styleSheet.createでスタイルシートを定義する
	```typescirpt
	const style = StyleSheet.create({
	   astyle: {
	   	 fontSize: 10,
	   },
	   bstyle: {
	   	 fontSize: 12,
	   }
	})
	```
	
### Flexbox
	
### Styled-Components
webと同様にReact Nativeでもstyled-componentsでコンポーネントのスタイリングができる

```typescript
const BodyView = styled.View`
    background-color: #eeeeee;
`;
```

## 参考
* React-Native ~ JavaScriptによるiOS/Andriodアプリ開発の実践