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

How to dynamically modify SimpleScrollView's backgroundColor ? And how to get DOM in 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 个解决方案

#1

I think ou are looking for "setNativeProps" Have a look at direct manipulation page

我想你正在寻找“setNativeProps”看一下直接操作页面