React Native と expo の tips 自分用

tipsが多くバラバラに上げるのもあれなので整理。
自分がハマったところ(勘違いやミスりそうなこと)が多く技術的なことは少なめかも。

TouchableOpacityのonPressが自動で動いてしまうのを止めさせる。

これは自動で動いてしまう。(コード的にもNGのようだ)

Buttonでの書き方

TouchableOpacity onPress={this.function(item)}

こちらは自動で動かない。(こちらが正しい)

TouchableOpacityの場合

TouchableOpacity onPress={() => this.function(item)}

stackoverflowのスレにも書かれているけれども、
renderされた時に、関数を呼び出して結果を返そうとするみたいだ。

Buttonの場合は、上の書き方でよろしい。
勘違いするとハマる…。

外部コンポーネントのrenderItemに要素を渡す場合

FlatList

<FlatList
  renderItem={({item}) => <ImportRenderItem item={item} />}
/>

親のfunctionを子コンポーネント Buttonで発火させる。

parent

_onPush = () => {
  console.log('push button')
}


// render内
// ハマりどころはここで(actionを)onPressにしちゃわないこと
<ChildButton action={this._onPush}/>

child

class ChildButton extends React.Component {
  render() {
    return (
      <Button title="button" onPress={this.props.action} />
    )
  }
}

注:functional componentのときは

parent

<FunctionalButton action=this._onPush />

in_functional_component

const FunctionalButton = (props) => {
  render() {
    return (
      <Button title="button" onPress={props.action} />
    )
  }
}

Functional側でthisが無いってだけなんだけれど、propsで受けているから当然だよね。

HotReloadなどでソースの変更が反映されない場合の対処法

端末がホワイトアウトして、変更が反映されているように見えるけれどbuild失敗している。

Failed building JavaScript bundle.

って、conosoleなりに表示され、加えて失敗している原因も表示されているので、落ち着いて対処しましょう。

react-native-navigationでScreen情報を取得

//遷移先にて
this.props.navigation.state.routeName

snapshotから値を取りたいのにPromiseが返ってくる時

Promise {_40: 0, _65: 0, _55: null, _72: null}

こんな感じで。

対策としては、async/awaitなどして値をとってください。

Invariant Violation: Tried to get frame for out of range index NaN

FlatListのdataはarrayだけだぜ?object渡していないかい?

app.jsonを使う

app.json = Constants.manifest
Constants.manifest以下はexpo配下になる。

app.json

{
  "expo": {
    "name": "app_name",
  }
}

console.log(Constants.manifest.name) // app_name