ReactネイティブでScrollView内の子ビューのスタイルを更新する

Question

私はその中にボタンがある子ビューを追加する横スクロールビューを持っています。私がしたいのは、選択された子を強調表示し、他の子を薄暗くすることです（本質的にスタイルを更新する）。状態を使用して選択した子のスタイルを更新することはできますが、スクロールビューの子の残りをどのように更新するのですか？私は、複数の州を参照しようとしましたが、誰も働いていませんでした。 誰もそれについて行く方法のようにいくつかのポインタを提供してもらえますか？

ありがとうございます！

Answer 1

子ビューを所有するコンポーネントは、子ビューが強調表示されているか淡色表示されているかを指定する必要があります。そうすることで、どの子を強調表示するかを決定するロジックはすべてコード内の1か所にあり、ユーザーが子供の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, 
    }, 
});