2017-12-31

react-nativeのフラットリストの使い方。

FlatListとはListViewより性能が良く、簡潔に書けるリストのことだ。

しかし、まだハマるところがあるので、メモ。

基本的な使い方は、まず、stateにリスト化するデータを記述。

state = {

data: [{ id: 1, title: 'a' }, { id: 2, title: 'b' }, { id: 3, title: 'c' }]

};

次にクラス内に、renderItemメソッドに代入するメソッドとkeyExtractorを定義

_renderItem = ({ item }) => (

<View>{item.title}</View>

);

_keyExtractor = ( item, index ) => item.id;

そして、Flatリストでレンダリングする。

||<

render() {
return (
<FlatList
data={this.state.data}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
/>
);
}

>||

となる。

もっと改良できそうだけれども、全ての人の要望に答えるとこんな感じになるのかね。

2017-12-28

愚痴

最悪のエンジニア上司にあたった。

react-nativeを使っている会社に、アルバイトとして参加して、react-nativeを書いている。

問題は作っているアプリをその上司が作ったのだが、一ヶ月前に作ったのにも関わらず、9割分からないそうだ。ドキュメントも、コメントも一切なし、redux,immutablejs,などのプラグインが多数入っていて、ついこないだ、アンドロイドが壊れてビルド出来ない。

本人にslackで質門しても、技術的な返事が帰ってきたことはなく、切れられる。

周囲の人間には開発速度が遅いと文句を言われる。作り直した方が早いのに。

そして最悪なのが、UIを全く無視して作ってあるので、とても使いづらい。

画面が13個ぐらいの小規模アプリなのにファイルが1000個もあり、ラザニアコードになっていて、やばい。

上司の上司は昼ごはんに連れて行ってくれる。楽しい。

でももう限界だ。

こんなアプリに関わっていたら、会社が潰れる。

この休みに、ゼロから書き上げてみよう。今のアプリより良いものが作れる自身はあるけど、採用されるかは分からない。

なんでフロントエンド勢が嫌われているか分かった。

こういう、最新技術使いたいだけの奴らが、後の人のことも考えずに、変にややこしい、そのくせ機能が同じぐらいのものを作って、迷惑をかけまくるからだ。

ふざけんなよ。

せめてコメント書けよ。

5年前のreact-nativeなんて、分かるか。

オレ一人で、react-nativeを開発しているので、好きにやってやる。

可読性と拡張性第一で、シンプルに頑強なコードとUIで作る。

フロントエンドエンジニアなんて頭のおかしい奴ら大嫌いだ。

2017-12-27

propTypesって何？

propTypes

React.jsではPropTypesとしてPropについての型などの制約を指定することが出来ます。

var Avatar = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
id: React.PropTypes.number.isRequired,
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
alt: React.PropTypes.string
},
render() {
var src = `/img/avatar/${this.props.id}.png`;
return (
<div>
<img src={src} width={this.props.width} height={this.props.height} alt={this.props.alt} />
<span>{this.props.name}</span>
</div>
);
}
});

上にあるように、貰うpropをstringに限定したり出来る。
意味あるのかな？react-nativeで使わなくてもいいんじゃ？

でもプラグイン読むのに必要だから理解する必要があるというジレンマ。

2017-12-25

atom でvimとdovrak配列を使う

http://shinespark.hatenablog.com/entry/2017/08/22/080000
以上参照
atomでvimを使うにはvim-mode-plusというプラグインを使う
その際.vimrcの設定にハマったのでメモ

実はコマンドは https://github.com/t9md/atom-vim-mode-plus/blob/eeb88cfc9b0aedb2c7d07363fd2023c75c18bc18/lib/command-table.coffee#L72-L75 に実装されているので、

その為、 keymap.cson に以下を追加するだけで利用可能になる。
'atom-text-editor.vim-mode-plus:not(.insert-mode)':
'shift-y': 'vim-mode-plus:yank-to-last-character-of-line'

Dvorakを使いたい場合は
'atom-text-editor.vim-mode-plus:not(.insert-mode)':
't': 'vim-mode-plus:move-up'
'h': 'vim-mode-plus:move-down'
'n': 'vim-mode-plus:move-right'
'd': 'vim-mode-plus:move-left'

2017-12-24

最新のreact-nativeでfetchが動かない。 react-native自体のバグだった。

https://q-a-assistant.com/computer-internet-technology/15536_react-native-fetch-throws-undefined-is-not-a-function-evaluating-0-reactnative-fetch.html

に書かれているとおり、

import {} from 'react-native';の中からfetchを抜くと直る。

なんだそれ

>||

import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
//fetch,
ActivityIndicator,
ListView
} from "react-native";

export default class MyCourse extends Component<{}> {
constructor(props) {
super(props);
this.state = {
isLoading: true
};
}

async componentDidMount() {
try {
let response = await fetch(
"https://facebook.github.io/react-native/movies.json"
);
let responseJson = await response.json();
let ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.setState(
{
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.movies)
},
function() {
// do something with new state
}
);
//return responseJson.movies;
} catch (error) {
console.error(error);
}
}

render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}

return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ListView
dataSource={this.state.dataSource}
renderRow={rowData => (
<Text>
{rowData.title}, {rowData.releaseYear}
</Text>
)}
/>
</View>
);
}
}

||<

ちなみに試したコードはreact nativeのfetchだった

2017-12-23

react nativeで render if return

renderとreturnの前にif文をつっこめるようだ。

これを見て感動するのは、jsに慣れてないからだろうか。

三項演算子使えるのかな？

```

render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}

return (
<View style={{flex: 1, paddingTop: 20}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
/>
</View>
);
}
}

```

mac貰えた。やった。

React Nati部

2017-12-10

stackNavigator とTabNavigatorの宣言の順序でちょっとハマった。

react navigationのstackNavigatorとTabNavigatorを一緒に使うとき、大体以下のようになる。

const Stacks = StackNavigator({

Stack1: { screen: Stack1 },

Tab1: { screen: Tab1 },

});

const Tabs = TabNavigator({

Tab1: { screen: Stacs },

Tab2: { screen: Tab2 },

});

これは動く。

しかし、StacksをTabsより下に記述するとエラーが出る。

JS怖い

ReactNati部