React Native의 ScrollView에서 자식 뷰의 스타일 업데이트

Question

내부에 버튼이있는 childviews가 추가 된 가로 스크롤보기가 있습니다. 내가하고 싶은 것은 선택한 아이를 강조 표시하고 다른 아이를 희미하게 (본질적으로 스타일을 업데이트하는 것)하는 것입니다. 상태를 사용하여 선택한 자식의 스타일을 업데이트 할 수 있지만 어떻게 scrollview의 자식 나머지 업데이트합니까? 나는 여러 주 (state)를 사용하여 시도했지만 아무도 일하지 않았다. 아무도 그것에 대해 어떻게 가야할지와 같은 몇 가지 지침을 제공 할 수 있습니까?

감사합니다 .. !!

Answer 1

자식 뷰를 소유하는 구성 요소가 강조 표시되어 있는지 또는 희미하게 표시되는지를 지정해야합니다. 그런 식으로 어떤 아이를 강조해야 할지를 결정하는 모든 논리는 코드에서 한 곳에서 이루어 지므로 사용자가 자녀 중 하나를 두드리면 소유자 구성 요소 만 다시 렌더링해야합니다.

각 어린이의 터치 이벤트를 감지하려면 TouchableWithoutFeedback 구성 요소로 묶습니다.

class OwnerComponent extends React.Component { 
    state = { 
    selectedChildIndex: null, 
    }; 

    render() { 
    return (
     <ScrollView> 
     <TouchableWithoutFeedback 
      onPressIn={() => { 
      this.setState({ selectedChildIndex: 0); 
      }} 
      onPressOut={() => { 
      this.setState({ selectedChildIndex: null); 
      }} 
      style={styles.touchableContainer}> 
      <View style={this.getChildStyle(0)} /> 
     </TouchableWithoutFeedback> 

     <TouchableWithoutFeedback 
      onPressIn={() => { 
      this.setState({ selectedChildIndex: 1); 
      }} 
      onPressOut={() => { 
      this.setState({ selectedChildIndex: null); 
      }} 
      style={styles.touchableContainer}> 
      <View style={this.getChildStyle(1)} /> 
     </TouchableWithoutFeedback> 
     </ScrollView> 
    ); 
    } 

    getChildStyle(childIndex) { 
    // No child is selected 
    if (this.state.selectedChildIndex === null) { 
    return null; 
    } 

    return (this.state.selectedChildIndex === childIndex) ? 
     styles.highlightedChild : 
     styles.dimmedChild; 
    } 
} 

let styles = StyleSheet.create({ 
    touchableContainer: { 
    flexGrow: 1, 
    }, 
    highlightedChild: { 
    backgroundColor: 0xf0f0f0; 
    }, 
    dimmedChild: { 
    opacity: 0.7, 
    }, 
});