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

はじめに

前回の記事はこちら
Expo CLIを使ってnativeアプリ開発入門編①

まだまだアプリの形としては不十分だが、react特有の書き方に馴染むためにプロジェクトを少し変更してみます。

変更点１．自作コンポーネントを追加する

App.jsに新たにコンポーネントを作成してみます。

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


export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      appName: 'アプリ名',
      userName: '',
    };
  }
  
  componentDidMount() {
    this.setState({ userName: '名無しさん' })
  }

  render() {
    return (
      <View style={styles.container}>
        <Header text={this.state.appName}/>
        <Text style={styles.text}>ようこそ、{this.state.userName}</Text>
      </View>
    );
  }
}

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

App.jsと同じ階層にsrcディレクトリを、その下にcomponentsディレクトリ、その下にHeader.jsファイルを作成し、コンポーネントを追加します。

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

export default class Header extends React.Component {

  componentDidMount() {
  }

  render() {
    return (
      <Text style={styles.text}>{this.props.text}</Text>
    );
  }
}

const styles = StyleSheet.create({
    text: {
      color: '#555',
    },
  });

解説

  constructor(props) {
    super(props);
    this.state = {
      appName: 'アプリ名',
      userName: '',
    };
  }
  componentDidMount() {
    this.setState({ userName: '名無しさん' })
  }

普段のreactと全く変わらずで、constructorで変数を初期化し、componentDidMountで値を代入しました。

      <View style={styles.container}>
        <Header text={this.state.appName}/>
        <Text style={styles.text}>ようこそ、{this.state.userName}</Text>
      </View>

各２つの変数(appNameとuserName)がありますが、appNameはHeaderコンポーネントにprops渡しをしていて、userNameはそのままstateの中身を表示しています。

  render() {
    return (
      <Text style={styles.text}>{this.props.text}</Text>
    );
  }

とてもシンプルな構成なので、Headerコンポーネントへのstateの渡し方と、Header.jsでの受け取り方がわかりやすいかと思います。