React Native-通过按键更改组件样式

Question

I know that in html and javascript are able to change it own css style by id and class , in react native, how to set / change the component style. I have map a list of component, and each of them have set a key value. When I call a function, I would like to change one of the component style.

eg: change the key is 2 component style

_RenderSpecialItem(){
  return this.state.speciallist.map((item, i)=>{
    return(
      <SpecialItem 
        key={i}
      />
    );
  });
}

_ChangeStyle(){
  //do something
}

Answer 1

You can use Direct Manipulation but it's not a good practice, for more please read

Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component ...

in the link. Otherwise, you should you set state in component and change state to update the style

eg

first set ref to the component :

<SpecialItem 
    key={i}
    ref={(thisItem) => this[`item-${i}`] = thisItem}
/>

then setNativeProps :

_ChangeStyle() {
    this['item-2'].setNativeProps({style: {/* your style here */}});
}

full example

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        speciallist: ['aaa', 'bbb', 'ccc']
    }
  }

  componentDidMount() {
    this['text-0'].setNativeProps({style: {fontSize: "10"}});
    this['text-1'].setNativeProps({style: {fontSize: "20"}});
    this['text-2'].setNativeProps({style: {fontSize: "30"}});
  }

  render() {

    return (
      <View style={styles.container}>
        {
          this.state.speciallist.map((item, i)=>(
            <Text
              key={`text-${i}`}
              ref={(thisItem) => this[`text-${i}`] = thisItem}
            >
              {item}
            </Text>
          ))
        }
      </View>
    );
  }
}