ReactNativeで作ったカスタムコンポーネントでonPress()が実装できない

Question

###前提・実現したいこと
現在ReactNativeを使いカード形式のカスタムコンポーネントを作っています。
その中でこのカードをタップした場合に親コンポーネントの関数を呼び出すことのできる機能を実装しようとしてるのですがなかなかできません。

###発生している問題・エラーメッセージ
状況としましては親コンポーネント内で以下のように実装したカスタムコンポーネント(Card)をクリックすると

import Card from './Card'

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  _onPress() {
    console.log('タップ確認')
  }
  render () {
    return (
      <Card onPress={() => this._onPress()} />
    )
  }
}

以下のようなエラーが発生してしまいParentComponentの_onPress()が呼ばれませんでした。

undefined is not a function (evaluating '_this2._onPress()')

###該当のソースコード

import React from 'react'
import {
  View,
  Alert,
} from 'react-native'

import Card from './Card'

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  _onPress() {
    console.log('タップ確認')
  }
  render () {
    return (
      <View>
        <Card onPress={() => this._onPress()} />
      </View>
    )
  }
}

import React from 'react'
import {
  View,
  Alert,
  TouchableHighlight,
  Text
} from 'react-native'


export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  _onPress() {
    console.log('タップ確認')
  }
  render () {
    return (
      <TouchableHighlight underlayColor={'#f3f3f2'}
                          onPress={this.props.onPress}>
        <View><Text>カード</Text></View>
      </TouchableHighlight>
    )
  }
}

###試したこと
エラー文からおそらくCardコンポーネント内のthis.props.onPress関数が親コンポーネントのonPress()を正しく呼出せてないのが原因かと思い
onPress().bind(this)を使ってみたりアロー文を消して関数だけを記述してみたのですが同様のエラーが出てしまい解決できませんでした。
おそらく関数のリンク付けの問題だと思うのですが、解決策が分かりませんでした。

よろしくお願いします

Answer 1

書かれたコード、正しく動きますよ。
0.42.3 ですが動作確認しました。

もしかしたら React Native Packager が古いキャッシュを持っていたかもしれません。
次でキャッシュクリアして試すとうまくいくのではないでしょうか ?

watchman watch-del-all
npm start -- --reset-cache

Comments

[YniHun]

ありがとうございます！