React Nativeでアプリの画面をつくろう（四角を描く）

# はじめに
React Nativeのローカル環境ができたばかりで何していいかわからないから
とにかく触ってみよう

# おさらい。Expoを起動する
プロンプトを起動。
アプリ（MyApp）を保管しているディレクトリ（C:\Users\watya\myApp）へ移動して、expo起動

```
cd C:\Users\watya\myApp
expo start
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/85f98c18-b49d-52be-f6f0-ede567a07f4c.png)

## web画面で手軽にチェック
w押下すると、実機でも見れる画面をweb画面から確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/8fa3b526-acc0-1088-9346-bc98888e1402.png)

## 実機で見たいとき
d押下すると developer tool起動される。
ここに出てくるQRコードを、Andoroid端末で Expo Go起動して 読み込むと、Android端末から画面表示できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/46fb764d-557f-5043-06b5-e4d7d67077bc.png)

# 画面に表示する文字を変える
エディターで<Text>タグで囲まれてるところを編集。
保存をしたら直後にブラウザ画面の内容が反映される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f45d49e7-bca6-f1a4-c0b5-e667230e80ad.png)

ちなみに文法エラーを起こした状態で保存したら画面真っ白になった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9976270f-245f-9e07-2df0-cb50a174a5c0.png)

developer toolsを見てみると、こっちでエラーが表示されてた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/4f1e195f-c7c9-9c67-3213-1f707eadbbe2.png)

# 超基本的なコード
React Nativeの

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

export default function App() {
  return (
    <View style={styles.container}>
        <Text>Hello React Native!</Text>
    </View>
  );
}

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

# 四角を描く
<Text>タグの代わりに、外枠の<View>の中に
<View>を作って、その中でstyleSheetよろしく内容をかいたらいける。

```
    <View style={styles.container}>
      <View
        style={{
          height: 100,
          width: "100%",
          borderColor: "gray",
          borderWidth: 1
        }}
        ></View>
    </View>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ea41ec38-ad8d-ffe6-e35c-8454c8e2b1ee.png)

# styleは変数化して呼び出せる
styleって変数化できるようだ。stylesheetも確かそんな感じだった。
すごいねぇ～。

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

export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}></View>    ← 下で定義したitemContainerはViewタグで呼ぶ感じ
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {    ←さっき作ったstyle。itemContainerって名前で定義した
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1
  },
});
```

# 四角の中に２つの四角を描く（widthで幅固定）
入れ子で描く。具体的には<View>タグの中に<View>を入れる。
後、親の<View>タグにのstylesに、flex or flexDirectionを付与する

要するにこんな感じ。

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

export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.oneContainer} />
          <View style={styles.oneContainer} />
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row"
  },
  oneContainer: {
    backgroundColor: "red",
    width: 100
  },
});
```

結果はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/510e71c7-1f59-6bde-5c87-e27f53b4d981.png)


# 脱線：flex, flexdirectionがよくわからない。。。

https://qiita.com/YutamaKotaro/items/b6e37c0314a258debaf3

によると、
flexプロパティは、画面上に対する要素のflexDirection方向の大きさの比率。
とのこと。
なお、flexDirectionは明記されていない場合は、flexDirection: "column"　扱いだそうです。

# 四角の中に２つの四角を描く（widthつかわない）
widthだと幅固定しちゃうので、このコンテナは残り全部、ってやるときはflex: 1。でイケる。

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

export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.leftContainer} />
          <View style={styles.rightContainer} />
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row"
  },
  leftContainer: {
    backgroundColor: "red",
    width: 100
  },
  rightContainer: {
    backgroundColor: "blue",
    flex:1
  },
});
```

結果はコチラ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1c079b0b-a478-68f5-d0fe-560594e1689f.png)