renderable()에서 TouchableHighlight 및 TouchableOpacity가 강조 표시됩니다.

Question

TouchableHighlight 및 TouchableOpacity가 렌더링시 시각적으로 반응하는 (onPress가 호출되지 않음) 동작이 발생합니다.

한 가지 사실은 내가 페이지를 입력하면 버튼이 작게 "깜박"하게 보일뿐입니다. 이것은 이상하지만 견딜 수 있습니다. 좀 더 실망스러운 부분은 부모 구성 요소의 상태를 변경하여 다시 렌더링()을 호출하면 버튼이 다시 "깜박"하여 상태를 변경할 때마다 모든 버튼이 깜박이는 것입니다.

버튼을 누르면 페이지 상태가 변경되므로 버튼을 누르면 두 버튼이 모두 깜박입니다.

나는 react-redux를 사용하지만이 동작에는 영향을 미치지 않습니다.

아래의 코드는 설명을위한 것입니다.

render() 
{ 
    return(
     <View> 
      <ToucableHightlight> //Click here changes state 
       <Content/> 
      </ToucableHightlight> 
      <ToucableHightlight> //Click here changes state 
       <Content/> 
      </ToucableHightlight> 
     <View> 
    ); 
} 

Answer 1

나는이 문제를 해결했다. 이전에 렌더링 기능을 수행하는 동안 "Content"구성 요소를 정의하여 각 업데이트 중 새로운 구성 요소를 정의했습니다. "내용"의 정의를 렌더링 기능 외부에 배치하면 페이지가 다시 렌더링 될 때 구성 요소가 더 이상 깜박이지 않습니다.

이것은 부모 구성 요소의 각 렌더링시 내 구성 요소가 새 구성 요소로 렌더링 된 이유를 설명하지만 초기 렌더링 중에 TouchableHighlight이 깜박이는 이유는 설명하지 않습니다.

초기 렌더링 중에 깜박이는 버튼은 허용됩니다. - 상태 변경시 깜박이는 버튼은 허용되지 않습니다.

저는 이제 충분히 행복합니다.

Answer 2

이후 버전을 사용하고 있기 때문에 확실하지는 않지만이 깜박임 현상은 첫 번째 클릭에서만 발생합니다.

내 솔루션은의 setTimeout

  <TouchableOpacity 
      onPress={function() { 
       setTimeout(function() { 
       _this.setState({myState: 'someValue'}) 
       }); 
      }} 
      >