0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

エンジニアスタンプラリー~フロントエンド編#16

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

モバイルアプリ

Desktop Applications

Electron

Getting Startedを参考に導入及び環境構築を実施。
今まで作成してきたデザインや機能をそのまま移植する。

App.tsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Form from './Form'
import List from './List'
import Bottom from './Bottom'

type P = {

}

type S = {
  page: string,
  front_skill: string[],
  back_skill: string[],
  inputText: string
}
export default class App extends React.Component<P, S> {
  constructor(props) {
    super(props)
    this.state = {
      page: 'front',
      front_skill: [],
      back_skill: [],
      inputText: ''
    }
    this._onPushButton = this._onPushButton.bind(this)
    this._onChangeText = this._onChangeText.bind(this)
    this._onChangePage = this._onChangePage.bind(this)
  }

  _onPushButton(): void {
    let { inputText, page, front_skill, back_skill } = this.state
    if (inputText !== '') {
      if (page === 'front'){
        front_skill.push(inputText)
      } else {
        back_skill.push(inputText)
      }
      inputText = ''
      this.setState({ front_skill, back_skill, inputText })
    }
  }

  _onChangeText(inputText: string): void {
    this.setState({ inputText })
  }

  _onChangePage(page: string): void {
    this.setState({ page })
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.form}>
          <Form inputText={this.state.inputText} _onPushButton={this._onPushButton} _onChangeText={this._onChangeText} />
        </View>
        <View style={styles.list}>
          <List skills={this.state.page === 'front' ? this.state.front_skill : this.state.back_skill} />
        </View>
        <View style={styles.bottom}>
          <Bottom _onChangePage={this._onChangePage} />
        </View>
      </View>
    )
  }
}

成果物

あまりコードの流用ができず、同じJavaScriptでも全く別物の印象。
https://github.com/tonchan1216/WDR-frontend-reactNative

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?