LoginSignup
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-07-08

はじめに

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

おさらい。Expoを起動する

プロンプトを起動。
アプリ(MyApp)を保管しているディレクトリ(C:\Users\watya\myApp)へ移動して、expo起動

cd C:\Users\watya\myApp
expo start

image.png

web画面で手軽にチェック

w押下すると、実機でも見れる画面をweb画面から確認できる。
image.png

実機で見たいとき

d押下すると developer tool起動される。
ここに出てくるQRコードを、Andoroid端末で Expo Go起動して 読み込むと、Android端末から画面表示できる。
image.png

画面に表示する文字を変える

エディターでタグで囲まれてるところを編集。
保存をしたら直後にブラウザ画面の内容が反映される。

image.png

ちなみに文法エラーを起こした状態で保存したら画面真っ白になった。
image.png

developer toolsを見てみると、こっちでエラーが表示されてた。
image.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',
  },
});

四角を描く

タグの代わりに、外枠のの中に
を作って、その中でstyleSheetよろしく内容をかいたらいける。

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

image.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
  },
});

四角の中に2つの四角を描く(widthで幅固定)

入れ子で描く。具体的にはタグの中にを入れる。
後、親のタグにの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

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

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

四角の中に2つの四角を描く(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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0