React Native - TouchableOpacityがAndroid上でアプリをクラッシュさせてしまう

Question

私は2つの項目のセットを切り替えるシンプルなコンポーネントを持っています - 時間は&ハッピーアワーです。コンポーネントはiOS上で正常に動作しますが、Android上でアプリケーションがクラッシュ（サイレント）する原因となります。

ここでは、実例があります：https://snack.expo.io/Sk92sIEmfです。

import React, { Component } from 'react'; 
import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; 

const { width } = Dimensions.get('window'); 

export default class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     showAnother: true, 
     oneThingActive: false, 
     anotherActive: true, 
    }; 
    } 

    handlePress =() => { 
    const { anotherActive, oneThingActive } = this.state 
    return this.setState({ anotherActive: !anotherActive, oneThingActive: !oneThingActive }); 
    } 

    render() { 

    const { showAnother, oneThingActive, anotherActive } = this.state 

    return (
     <View style={s.container}> 
     <View style={s.sRow}> 
      <TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}> 
      <Text style={[s.text, s.title, !oneThingActive && s.inactive]}>ONE THING</Text> 
      </TouchableOpacity> 
      { showAnother && 
      <Text style={[s.text, s.title]}>|</Text> 
      } 
      { showAnother && 
      <TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}> 
       <Text style={[s.text, s.title, !anotherActive && s.inactive]}>ANOTHER</Text> 
      </TouchableOpacity> 
      } 
     </View> 
     { oneThingActive && 
      <View style={s.row}> 
      <Text style={[s.text, s.day]}>testing..</Text> 
      </View> 
     } 
     { anotherActive && 
      <View style={s.row}> 
      <Text style={[s.text, s.day]}>123..</Text> 
      </View> 
     } 
     </View> 
    ) 
    } 
} 

const s = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    alignItems: 'center', 
    justifyContent: 'center', 
    marginHorizontal: 35, 
    marginVertical: 5, 
    borderColor: '#D4D4D4', 
    borderTopWidth: 1, 
    borderBottomWidth: 1, 
    }, 
    titleCont: { 
    alignSelf: 'flex-start', 
    }, 
    title: { 
    color: '#232323', 
    fontSize: 14, 
    alignSelf: 'flex-start', 
    marginHorizontal: 5, 
    }, 
    text: { 
    color: '#232323', 
    fontSize: 13, 
    }, 
    inactive: { 
    color: '#95989A', 
    }, 
    row: { 
    display: 'flex', 
    flexDirection: 'row', 
    }, 
    sRow: { 
    display: 'flex', 
    flexDirection: 'row', 
    width: width, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingBottom: 5, 
    }, 
}) 

前述のように、このコードはクラッシュするとエラーにはなりません。ある時点で、「は読み取り専用プロパティを割り当てようとしましたが、そのエラーメッセージが表示されなくなりました。どのような助けや正しい方向への指摘も大変ありがとうございます。

ありがとうございます！

編集：

簡単な例を更新しました。条件付きレンダリング（this.state.oneThingActive && ...）が頻繁に使用するパターンで、クラッシュがこのような問題に遭遇していないようです。

再現する最良の方法は、ReactネイティブアプリのIDE設定を持つhttps://snack.expo.io/Sk92sIEmfというリンクをご覧ください。プラットフォームがiOSの場合、トグルはうまく動作しますが、Androidバージョンで状態の変更が試行されると、アプリケーションがクラッシュします。

編集2：

問題はTouchableOpacityの使用によるものであったようだ....私は、Androidアプリがconsole.log("...")からクラッシュに気づいたので、私はTouchableHighlightにスワップしようと、それが動作するようになりました。 これ以上のことを調査するつもりですが、もし誰かが何かを持っていたら、それを聞いてみたいと思っています。

Answer 1

これは、クラスメソッドが自動的にインスタンスにバインドされていないという問題のようです。これらをコンストラクタに追加します。

this.hoursPressed = this.hoursPressed.bind(this); 
this.happyHoursPressed = this.happyHoursPressed.bind(this); 

これはReactでES6クラスを使用する際の一般的な問題です。