Skip to content

Instantly share code, notes, and snippets.

@ln-north

ln-north/note-dev-react-native.md

Last active September 23, 2018 06:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ln-north/22d53d62b3570fd3b9408934be1999bd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ln-north/22d53d62b3570fd3b9408934be1999bd to your computer and use it in GitHub Desktop.
Download ZIP
React Native開発メモ
Raw
note-dev-react-native.md

React Native開発メモ

やったこと

The Basics

Getting Started

  • sysctl kern.maxfilesあたりの上限を上げる必要があった
    • npm startしたら案内がちゃんとあった
  • User manualとtrouble shootingのリンク切れ
  • Expoというdev環境があって便利。同一LAN内であれば実機検証ができるらしいが、僕の家のルーターのDHCP周りが壊れてて使えなかった

Learn the Basics

コピペでできた

Props

簡単に言うとPropsはにわたすattribute。外部から渡すもの

State

内部で変化する状態。

constructor(props) {
  super(props)
  this.state = {hoge: true} // インターフェース生やす
}

_hoge() {
  this.setState({hoge: false}); // setStateで差し替え
}

とするのが定石。このへんのstate管理は将来的にはMobxでやりたいんだけど、react nativeだけでもお腹いっぱいなのにMobxも学ばなきゃならんのか〜という気持ちがある。

Style

import { StyleSheet } from 'react-native';

してから

const styles = StyleSheet.create({
  hoge: {
    color: yellow;
  }
});

とするほうが StyleSheet.create しないよりパフォーマンスが良いらしい

Height and Width

大体いつものCSS

Layout width Flexbox

webのデフォルトはrowだが、react-nativeのdefaultはcolumnで有ることに注意

Handling Text Input

onChangeText からの setState で変えていこうな、という話

Handling Touched

  • onPress={function} で回してやろう
  • Touchしたあとのアクションは TouchableHighLight, TouchableOpacity, TouchableNativeFeedback(Androidのみ), TouchableWithoutFeedback なんかで囲う必要があるらしい。Webに寄り添ってると思ったらこの辺iOS, Androidにベッタリなんだな感。WebのReactとか標準コンポーネントだよ〜というより、諸々デバイスのインターフェースをReactComponentで表現してますよ感がある。

Using a ScrollView

ScrollもScrollViewで表現。これもwebとは違うところだな、こっちのほうが筋は良いとは思うが。

Using List View

Webだとul, liをベタベタ書いていくので馴染みがないコンポーネントだが、繰り返す処理ごとwrapしてある

Networking

FetchAPIがある。Web標準のインターフェースだけど個人的にあんまり使い慣れないのでちゃんと学んでおきたい。

Guides

Components and APIs

ざっくりすべての標準コンポーネントのドキュメントを見て軽く試したりした。魅力的なのもあったけど、下の方はもうちょいドキュメント整備したいなという感じもした(各Componentに動くサンプルコードがあると嬉しい。)

以下気になったところ

Button

Style当てられない。ViewでWrapする必要がある。当てたい人のためにReact Native ELementsというUI Toolkitがあった。標準で用意してくれりゃ良いものをまた学習を一層挟む必要があるのか…(初学者の絶望感

iOS Components and APIs / Android Components and APIs

React Nativeっていうのは共通コンポーネントでいろんな環境をサポートするものだと思っていたが、この辺見ちゃうと、いろんな環境のAPIをReactフォーマットで表現しましたよ感が強い気がしている。まぁ仕方ない感じもするし、僕は直近iOSアプリが作りたいので恩恵はあるけども。というかiOS, Androidが提供する新規のAPI周りはどのぐらいの開発スピードでサポートされるんだろうか。

Platform Specific Code

Platform.OS　の中に文字列入ってる、Platform.select で分岐っぽいことが楽にできる。

Navigation Between Screens

react-native-navigationが開発されている。読んでもどうすれば動くのかよく理解できなかった。動くデモコードがほしい…navigator propsの指し方なんか知らんのじゃ。 iOSのみがターゲットで、ネイティブっぽい動作ならNavigatorIOSが良いらしい。 よくわからなかったのでreact-native-navigationを必要になったらやる。

Images

  • 相対パスで画像を指定できるが、指定するときは require('./path/to/image') で指定する
  • @2x, @3xとか拡張子前に書いておくと勝手にそうなる
  • バックグラウンドにしてネストしたいときは <ImageBackground> を使って <ImageBackground><Text/></ImageBackground> な感じにする

Animations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment