如何在react-native中动态修改组件属性样式?

时间:2016-05-27 09:12:33

标签: react-native

如何动态修改SimpleScrollView的backgroundColor? 以及如何在反应原生中获取DOM?

// SimpleScrollView

const NUM_ITEMS=20;

class SimpleScrollView extends React.Component{
  static title= '<ScrollView>';
  static description='Component';
  itemClick(){
    //how to dynamically modify SimpleScrollView's backgroundColor

  }
  makeItem(itemsCount:number,itemStyles):Array<any>{
    let newItems=[];
    for(let i=0;i<itemsCount;i++){
      newItems[i]=(<TouchableOpacity key={i} style={itemStyles} onPress={()=>this.itemClick()}>
           <Text >{'item'+i}</Text>
        </TouchableOpacity>
      );
    }
    return newItems;
  }
  render(){
    let items=this.makeItem(NUM_ITEMS,styles.itemWrapper);
    items[5]=(
      <ScrollView key={'scrollView'} horizontal={true} >
        {this.makeItem(NUM_ITEMS,[styles.itemWrapper,styles.horizontalItemWrapper])}
      </ScrollView>
    );
    let verticalScrollView=(
       <ScrollView style={styles.verticalScrollView}>
        {items}
       </ScrollView>

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

1 个答案:

答案 0 :(得分:0)

我认为你正在寻找&#34; setNativeProps&#34; 看看direct manipulation page