我知道在html并且javascript能够css通过id和class，在本机react中，如何设置/更改组件样式来更改它自己的样式。我有map一个组件列表，每个组件都设置了一个key值。当我调用一个函数时，我想改变一个组件样式。
例如：更改keyis 2 组件样式
_RenderSpecialItem(){
return this.state.speciallist.map((item, i)=>{
return(
<SpecialItem
key={i}
/>
);
});
}
_ChangeStyle(){
//do something
}
你可以使用Direct Manipulation但这不是一个好习惯，更多请阅读
直接操作不会是您经常使用的工具；您通常只会使用它来创建连续动画以避免渲染组件的开销......
在链接中。否则，您应该在组件中设置状态并更改状态以更新样式
例如
首先将 ref 设置为组件：
<SpecialItem
key={i}
ref={(thisItem) => this[`item-${i}`] = thisItem}
/>
然后 setNativeProps ：
_ChangeStyle() {
this['item-2'].setNativeProps({style: {/* your style here */}});
}
完整示例
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>
);
}
}