Question

我知道在html和javascript能够通过css和id更改自己的class样式，在本机中，如何设置/更改组件样式。我有map组件列表，每个组件都设置了key值。当我调用一个函数时，我想改变一个组件样式。

例如：更改key是2组件样式

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

_ChangeStyle(){
  //do something
}

Answer 1

你可以使用Direct Manipulation，但这不是一个好习惯，更多请阅读

直接操纵不会成为您经常使用的工具;您通常只会使用它来创建连续动画，以避免渲染组件的开销......

链接中的

。否则，您应该在组件中设置状态并更改状态以更新样式

e.g。

首先将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>
    );
  }
}

React Native - 按键更改组件样式

1 个答案: