在React Native中更新ScrollView中子视图的样式

Question

我有一个水平滚动视图，里面添加了里面有按钮的子视图。我想要做的就是突出显示选中的孩子，并让其他孩子变暗（基本上更新样式）。我能够使用状态更新选定的孩子的风格，但是如何更新其他的scrollview子元素？我曾尝试使用裁判，多个州但没有工作。 任何人都可以请提供一些指针，如何去做呢？

谢谢.. !!

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, 
    }, 
});