エンジニアスタンプラリー~フロントエンド編#16
11383 ワード
企画主旨
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
Author And Source
この問題について(エンジニアスタンプラリー~フロントエンド編#16), 我々は、より多くの情報をここで見つけました https://qiita.com/tonchan1216/items/dde48af1aa5afc334347著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .