Expo CLIを使ってnativeアプリ開発入門編③

はじめに

前回の記事

今回はもう少しアプリっぽい見た目を作るのを目的に、react nativeで用意されているいくつかのコンポーネントを使ってみます。
※公式docに書いてあることを日本語でやっています。

flexを使ってコンポーネントのサイズを動的に指定する

前回用意したHeader.jsと同じように、Main.js、Footer.jsも用意することにします。
ディレクトリ構成は今のところこのような感じ。

App.jsで各コンポーネントを読み込む。

import React, { Component }  from 'react';
import { View, StyleSheet } from 'react-native';
import Header from './src/components/Header';
import Main from './src/components/Main';
import Footer from './src/components/Footer';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Header />
        <Main />
        <Footer />
      </View>
      );
  }
}

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

各コンポーネントの親になるコンポーネントに対してflex:1を指定しています。

Header.js

import React, { Component }  from 'react';
import { StyleSheet, View } from 'react-native';

export default class Header extends Component {
    render() {
        return (
        <View style={styles.container}>
        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Main.js

import React, { Component }  from 'react';
import { StyleSheet, View } from 'react-native';

export default class Main extends Component {
    render() {
        return (
            <View style={styles.container}>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor: 'powderblue',
    },
});

Footer.js

import React, { Component }  from 'react';
import { StyleSheet, View } from 'react-native';

export default class Footer extends Component {
    render() {
        return (
        <View style={styles.container}>
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'blue',
    },
});

上の３つはほぼ同じですが、flexの値を上から１，２，１としてます。
またわかりやすいように背景色を変更しています。

これでbuildをすると、一つの画面上に１：２：１の割合で各コンポーネントが表示されるのが確認できます。

画像を表示してみる

公式docではwikiのサイトにあるバナナの画像を表示していましたが、ここではせっかくなのでこのブログの画像パスを指定して、ブログのメイン画像を表示してみます。

Header.js

import React, { Component }  from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';

export default class Header extends Component {
    render() {
        let pic = {
        uri: 'https://weblion303.net/wp-content/uploads/2019/04/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AB%E3%83%B3%E3%83%9A.gif'
        };

        return (
        <View style={styles.container}>
            <Image source={pic} style={{width: 193, height: 110}}/>
            <Text>TECH 1000+ Native App</Text>
        </View>
        );
    }
}

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

Imageを新たにimportしています。
picという変数に画像のパスを指定しています。

テキストボックスを配置する

次にMain.js内にタップすると文章を入力できるエリアの配置と、入力した文章をReactっぽく画面にプレビューしてみます。

Main.js

import React, { Component }  from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{padding: 10, fontSize: 20}}>
                    一言どうぞ
                </Text>
                <TextInput
                    style={{height: 40}}
                    placeholder="ここにメッセージを入れてね!"
                    onChangeText={(text) => this.setState({text})}
                />
                <Text>
                    プレビュー：{this.state.text}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor: 'powderblue',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

これでエリアをタップするとキーボードが表示され、文字を打ち込むごとにすぐ下のテキストエリアに入力した内容が表示されていきます。

ボタンを表示して押した際のアクションを作る

最後にFooter.jsにはボタンを追加し、押すとダイアログボックスでメッセージが表示されるようにしてみます。この時点では決め打ちの文章を出します。

import React, { Component }  from 'react';
import { StyleSheet, View, Button, Alert } from 'react-native';

export default class Footer extends Component {

    _onPressButton() {
        Alert.alert('ボタンが押された')
    }

    render() {
        return (
        <View style={styles.container}>
            <Button
                onPress={this._onPressButton}
                title="Press Me"
                color="red"
            />
        </View>
        );
    }
}

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

実行結果

ここまででbuildして端末で確認してみると、用意されているコンポーネントを使っただけなのに今までよりはずいぶんアプリっぽい感じになりました。

次の記事