React Native - TouchableOpacity가 Android에서 충돌하는 원인이되었습니다.

Question

시간의 두 세트 사이를 전환하는 간단한 구성 요소가 있습니다. 시간은 & 시간입니다. 이 구성 요소는 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 && ...)에서 충돌이 발생하는 것으로 보입니다. 자주 사용하는 패턴이며 이와 같은 문제는 발생하지 않았습니다.

재현하는 가장 좋은 방법은 다음 링크를 방문하는 것입니다 : https://snack.expo.io/Sk92sIEmf, React Native apps 용 IDE 설정. 플랫폼이 iOS 인 경우 토글이 제대로 작동하지만 Android 버전에서 상태 변경이 시도되면 앱이 다운됩니다.

편집 2 :

이 문제가 TouchableOpacity의 사용에 기인 보인다는 .... 나는 안드로이드 응용 프로그램은 console.log("...")에서 충돌 알게되었다, 그래서 나는 TouchableHighlight에서 스와핑 시도하고 작동하도록 얻었다. 다가오는 날에 더 많은 것을 조사하려고하지만, 누군가가 있다면 입력을 듣고 싶습니다.

Answer 1

클래스 메서드가 인스턴스에 자동으로 바인딩되지 않는다는 점에서 문제가있는 것처럼 보입니다.

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

이것은 React와 함께 ES6 클래스를 사용하는 데 공통적으로 발생하는 문제입니다.