title: How to dynamically modify the component properties style in react-native?
body: <p>How to dynamically modify SimpleScrollView's backgroundColor ?
  And how to get DOM in react-native?</p>
  
  <p>//SimpleScrollView</p>
  
  <pre><code>const NUM_ITEMS=20;
  
  class SimpleScrollView extends React.Component{
    static title= '&lt;ScrollView&gt;';
    static description='Component';
    itemClick(){
      //how to dynamically modify SimpleScrollView's backgroundColor
  
    }
    makeItem(itemsCount:number,itemStyles):Array&lt;any&gt;{
      let newItems=[];
      for(let i=0;i&lt;itemsCount;i++){
        newItems[i]=(&lt;TouchableOpacity key={i} style={itemStyles} onPress={()=&gt;this.itemClick()}&gt;
             &lt;Text &gt;{'item'+i}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        );
      }
      return newItems;
    }
    render(){
      let items=this.makeItem(NUM_ITEMS,styles.itemWrapper);
      items[5]=(
        &lt;ScrollView key={'scrollView'} horizontal={true} &gt;
          {this.makeItem(NUM_ITEMS,[styles.itemWrapper,styles.horizontalItemWrapper])}
        &lt;/ScrollView&gt;
      );
      let verticalScrollView=(
         &lt;ScrollView style={styles.verticalScrollView}&gt;
          {items}
         &lt;/ScrollView&gt;
  
      );
      return verticalScrollView;
  
    }
  }
  
  var styles = React.StyleSheet.create({
    verticalScrollView: {
      margin: 10,
    },
    itemWrapper: {
      alignItems:'center',
      backgroundColor: '#dddddd',
      borderRadius: 5,
      borderWidth: 5,
      borderColor: '#a52a2a',
      padding: 20,
      margin: 5,
    },
    horizontalItemWrapper: {
      padding: 20
    },
  });
  </code></pre>