react-native - 按下按钮时反应原生添加活动类

Question

我在反应原生项目 iOS 应用程序上有 3 个按钮。如何将活动课程设置为单击按钮并从其他人那里删除该课程？就像我在 jquery 上使用的 addClass/removeClass 一样？

Answer 1

首先让你定义你的风格“类”。

const styles = StyleSheet.create({
  btnSelected: {
     ...
  },
  notSelected : {
  }
});

然后你可以在你的 react 组件中使用 state 属性。

例子 ：

state = {
  btnSelected: 1
}

<Button 
    style={(this.state.btnSelected== 1)?styles.btnSelected:styles.notSelected}
    onPress={() => this.setState({ btnSelected: 1 })} ... />
<Button 
    style={(this.state.btnSelected== 2)?styles.btnSelected:styles.notSelected} ... 
    onPress={() => this.setState({ btnSelected: 2 })} .../>
<Button 
    style={(this.state.btnSelected== 3)?styles.btnSelected:styles.notSelected} 
    onPress={() => this.setState({ btnSelected: 3 })} ... />

Answer 2

React 和 React Native 中的关键概念是，您不必强制设置 UI 的状态。相反，您更改了一些状态，然后基于该状态以声明方式呈现 UI。

例如，您可以使用本地组件状态 ( this.state)：

  class Buttons extends React.Component {
    state = {
      activeButton: 'first'
    }

    render() {
      return (
        <View>
          <Button
            onPress={() => this.setState({ activeButton: 'first' })}
            isActive={this.state.activeButton === 'first'}
          />
          <Button
            onPress={() => this.setState({ activeButton: 'second' })}
            isActive={this.state.activeButton === 'second'}
          />
          <Button
            onPress={() => this.setState({ activeButton: 'third' })}
            isActive={this.state.activeButton === 'third'}
          />
        </View>
      )
    }
  }

事件处理程序使用onPress设置本地组件状态setState，这会导致组件立即重新渲染。然后根据与某个值isActive进行比较的表达式在所有按钮上设置该属性。this.state.activeButton