按下按钮时反应本机添加活动 class

Question

我在 React Native 项目 iOS 应用程序上有一个 3 个按钮。我如何设置 class active to clicked button 并从其他人那里删除这个 class？就像我在 jquery 上使用的 addClass/removeClass 一样？

Answer 1

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 设置本地组件状态，这会导致组件立即重新呈现。然后根据将 this.state.activeButton 与某个值进行比较的表达式，在所有按钮上设置 isActive 属性。

Answer 2

首先定义你的风格"class"。

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

然后你可以在你的 React 组件中使用状态属性。

示例：

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 })} ... />

按下按钮时反应本机添加活动 class

React native add active class when push the button

react-native

react-native-ios