버튼을 누를 때 네이티브 추가 활성 클래스에 반응하십시오.

Question

응답 네이티브 프로젝트 iOS 앱에 3 개의 버튼이 있습니다. 클래스를 활성화 된 버튼으로 설정하고이 클래스를 다른 클래스에서 삭제하려면 어떻게해야합니까? 내가 jquery에 사용했던 addClass/removeClass와 비슷합니까?

Answer 1

먼저 자신의 스타일 "클래스"를 정의하십시오.

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

그런 다음 반응 구성 요소에 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 and React Native의 핵심 개념은 UI의 상태를 절대적으로 설정하지 않는다는 것입니다. 대신, 일부 상태를 변경 한 다음이를 기반으로 선언적으로 UI를 렌더링합니다.

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)를 사용할 수 있습니다. 그런 다음 isActive 속성을 this.state.activeButton과 일부 값을 비교하는 식을 기반으로 모든 단추에 설정합니다.